angular-toolbox 0.11.3 → 0.11.4

package/fesm2022/angular-toolbox.mjs

@@ -1,18 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, EventEmitter, Component, Directive, Output, Input, HostListener, Inject, isDevMode, Optional, inject, Pipe } from '@angular/core';
+import { Injectable, NgModule, EventEmitter, Component, Directive, Output, Input, HostListener, Inject, isDevMode, Optional, inject, ChangeDetectionStrategy, Pipe } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { DOCUMENT, XhrFactory } from '@angular/common';
-import { HttpStatusCode, HttpHeaders, HttpErrorResponse, HttpParams, HttpRequest } from '@angular/common/http';
-import { from, Observable, of } from 'rxjs';
-import * as i1$1 from '@angular/platform-browser';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, formatDate, XhrFactory, CommonModule, DatePipe, NgStyle } from '@angular/common';
+import { Observable, from, of } from 'rxjs';
+import { HttpHeaders, HttpStatusCode, HttpErrorResponse, HttpResponse, HttpParams, HttpRequest, HttpContextToken, HttpContext } from '@angular/common/http';
+import { HttpMockLoggingService as HttpMockLoggingService$1 } from 'projects/angular-toolbox/src/public-api';
+import * as i1$2 from '@angular/platform-browser';
 
 /**
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -37,8 +39,8 @@ class SubscriptionError extends Error {
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -63,8 +65,8 @@ class IntegrityError extends Error {
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -87,8 +89,8 @@ class AppBridgeError extends ReferenceError {
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -305,8 +307,8 @@ const SYMBOL = "symbol";
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -461,8 +463,8 @@ class AbstractSubscriptionManager {
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -543,8 +545,8 @@ class AbstractVersionManager {
 const LAYERS_VERSION_CONFIG = {
     major: 0,
     minor: 11,
-    patch: 3,
-    buildTimestamp: 1722599248501,
+    patch: 4,
+    buildTimestamp: 1724056397828,
     metadata: "beta"
 };
 /**
@@ -994,8 +996,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -1277,24 +1279,32 @@ const DARK_MODE_CONFIG = {
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 
 /**
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 
 /**
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 
 /**
@@ -1360,6 +1370,11 @@ const DARK_MODE_CONFIG = {
  * Use of this source code is governed by an MIT-style license that can be found in
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
+/**
+ * The markup interface for `Observable` object built from the Fetch API.
+ */
+class FetchClient extends Observable {
+}
 
 /**
  * @license
@@ -1468,6 +1483,81 @@ const HTTP_MOCKING_FRAMEWORK_CONFIG = {
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * Defines the level of an Angular Toolbox log.
+ *
+ */
+var LogLevel;
+(function (LogLevel) {
+    /**
+     * Indicates that the log is a basic information message.
+     */
+    LogLevel[LogLevel["INFO"] = 0] = "INFO";
+    /**
+     * Indicates that the log represents a config message.
+     */
+    LogLevel[LogLevel["CONFIG"] = 1] = "CONFIG";
+    /**
+     * Indicates that the log is a warning message.
+     */
+    LogLevel[LogLevel["WARNING"] = 2] = "WARNING";
+    /**
+     * Indicates that the log message represents an error.
+     */
+    LogLevel[LogLevel["ERROR"] = 3] = "ERROR";
+    /**
+     * A special level used by loggers to prevent logs to be processed.
+     */
+    LogLevel[LogLevel["OFF"] = 4] = "OFF";
+})(LogLevel || (LogLevel = {}));
+
 /**
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
@@ -1499,8 +1589,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 // --> Internal constants
 /**
@@ -1768,8 +1858,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -1843,8 +1933,8 @@ class AppBridge {
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
@@ -2180,8 +2270,8 @@ const DOLLAR = "$";
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  *
  * This source code is derived from the following original source code:
  * - https://github.com/pillarjs/path-to-regexp
@@ -3080,47 +3170,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be found in
- * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
- * The definition function for the `@HttpMock` decorator.
- *
- * @param config The `HttpMockConfig` object used to initialize the HTTP Mocking Framework.
+ * The default implementation of the `Log` interface.
  */
-const HttpMock = (config) => {
-    return (constructor) => {
-        const getMockService = (instance) => {
-            return Object.values(instance).find((v) => {
-                return (v.hasOwnProperty('type') && v.type === HTTP_MOCK_SERVICE);
-            });
-        };
-        const ngOnInit = constructor.prototype.ngOnInit;
-        const ngOnDestroy = constructor.prototype.ngOnDestroy;
-        const uiid = config.id || Uuid.build();
-        if (!ngOnDestroy)
-            throw new ReferenceError("Component must implement the OnDestroy interface.");
-        if (!ngOnInit)
-            throw new ReferenceError("Component must implement the OnInit interface.");
-        if (!config.id)
-            config.id = uiid;
-        constructor.prototype.ngOnInit = function () {
-            const mockService = getMockService(this);
-            if (!mockService)
-                throw new ReferenceError("No provider found for HttpMockService.");
-            mockService.addConfig(config);
-            ngOnInit.call(this);
-        };
-        constructor.prototype.ngOnDestroy = function () {
-            const mockService = getMockService(this);
-            // An exception is already thrown by the ngOnInit() method when HttpMockService is not provided.
-            // Following check statement prevents failure during Unit Testing:
-            if (mockService)
-                mockService.removeConfig(uiid);
-            ngOnDestroy.call(this);
-        };
-    };
-};
+class LogImpl {
+    /**
+     * Creates a new `LogImpl` instance.
+     *
+     * @param caller Ahuman readable reference for the invoker associated with this log.
+     * @param message The message associated with this log.
+     * @param level The criticality level of this log.
+     * @param metadata Optional metada associated with this log.
+     */
+    constructor(caller, message, level, metadata) {
+        this.caller = caller;
+        this.message = message;
+        this.level = level;
+        this.metadata = metadata;
+        this.timestamp = Date.now();
+    }
+}
 
 /**
  * @license
@@ -3130,113 +3202,78 @@ const HttpMock = (config) => {
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
- * @private
- */
-const OK = "OK";
-/**
- * A statefull builder for creating new `HttpResponseMock` instances.
+ * The default ATX log connector. Allows to process logs silently.
+ * This can be useful for removing logs from production environments, if needed.
  */
-class HttpResponseMockBuilder {
-    constructor() {
-        /**
-         * @private
-         */
-        this._response = {
-            url: null,
-            body: null,
-            status: HttpStatusCode.Ok,
-            statusText: OK,
-            error: null,
-            delay: 0
-        };
-    }
+class DefaultLogConnector {
     /**
-     * Sets the body property of the new `HttpResponseMock` instance with the specified `body` value.
-     *
-     * @param body The value used to set the body property of the new `HttpResponseMock` instance.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    body(body) {
-        this._response.body = body;
-        return this;
-    }
+    destroy() { }
     /**
-     * Sets the headers property of the new `HttpResponseMock` instance with the specified `headers` value.
-     *
-     * @param headers The value used to set the `headers` property of the new `HttpResponseMock` instance.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    headers(headers) {
-        this._response.headers = headers;
-        return this;
-    }
+    init(logList) { }
     /**
-     * Sets the `status` property of the new `HttpResponseMock` instance with the specified `status` value.
-     *
-     * @param status The value used to set the `status` property of the new `HttpResponseMock` instance.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    status(status) {
-        this._response.status = status;
-        return this;
-    }
+    sendLog(log) { }
     /**
-     * Sets the `statusText` property of the new `HttpResponseMock` instance with the specified `statusText` value.
-     *
-     * @param statusText The value used to set the `statusText` property of the new `HttpResponseMock` instance.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    statusText(statusText) {
-        this._response.statusText = statusText;
-        return this;
-    }
+    clearLogs() { }
     /**
-     * Sets the `url` property of the new `HttpResponseMock` instance with the specified `url` value.
-     *
-     * @param url The value used to set the `url` property of the new `HttpResponseMock` instance.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    url(url) {
-        this._response.url = url;
-        return this;
+    copyLogs() { }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * An implementation of the `LogConnector` class that sends logs to the JavaScript
+ * native `console` object.
+ */
+class ConsoleLogConnector {
+    /**
+     * @inheritdoc
+     */
+    destroy() { }
+    /**
+     * @inheritdoc
+     */
+    init(logList) {
+        logList.forEach(log => this.sendLog(log));
     }
     /**
-     * Sets the `delay` property of the new `HttpResponseMock` instance with the specified `timer` duration.
-     * Maximum value is `10000` miliseconds (10 seconds).
-     *
-     * @param timer The value used to set the `delay` property of the new `HttpResponseMock` instance.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    delay(timer = 0) {
-        this._response.delay = timer;
-        return this;
+    sendLog(log) {
+        const level = log.level;
+        if (level === LogLevel.INFO)
+            return console.info(log);
+        if (level === LogLevel.CONFIG)
+            return console.log(log);
+        if (level === LogLevel.ERROR)
+            return console.error(log);
+        console.warn(log);
     }
     /**
-     * Returns a new `HttpResponseMock` instance, built from the properties specified with the
-     * `HttpResponseMockBuilder` methods.
-     *
-     * @param error An optional value used to set the `error` property of the new `HttpResponseMock` instance.
-     *              The `error` parameter values take precedence over all other properties of the `HttpResponseMock`
-     *              instance.
-     * @returns A new `HttpResponseMock` instance.
+     * @inheritdoc
      */
-    response(error = null) {
-        this._response.error = error;
-        return this._response;
+    clearLogs() {
+        console.clear();
     }
+    /**
+     * Not supported.
+     */
+    copyLogs() { }
 }
-/**
- * A utility function used to create new "chainable" `HttpResponseMockBuilder` instances.
- *
- * @returns A new `HttpResponseMockBuilder` instance.
- */
-const httpResponseMock = () => new HttpResponseMockBuilder();
 
 /**
  * @license
@@ -3246,134 +3283,171 @@ const httpResponseMock = () => new HttpResponseMockBuilder();
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
- * A statefull builder for creating new `HttpHeaders` instances.
+ * @private
  */
-class HttpHeadersMockBuilder {
-    constructor() {
-        /**
-         * @private
-         */
-        this._headers = new HttpHeaders();
-    }
-    /**
-     * Sets the `"Cache-Control"` property of the new `HttpHeaders` instance with the specified value.
-     *
-     * @param value The value used to set the `"Cache-Control"` property of the new `HttpHeaders` instance.
-     * Default value is `"no-cache"`.
+const DIV = "div";
+/**
+ * @private
+ */
+const SPAN = "span";
+/**
+ * @private
+ */
+const S_LOG_INFO = "atx-log";
+/**
+ * @private
+ */
+const S_LOG_CONFIG = "atx-config-log";
+/**
+ * @private
+ */
+const S_LOG_ERROR = "atx-error-log";
+/**
+ * @private
+ */
+const S_WARN = "atx-warn-log";
+/**
+ * @private
+ */
+const S_LOG_TIME = "atx-log-time";
+/**
+ * @private
+ */
+const S_LOG_LEVEL = "atx-log-level";
+/**
+ * @private
+ */
+const S_LOG_CALLER = "atx-log-caller";
+/**
+ * @private
+ */
+const S_LOG_MSG = "atx-log-message";
+/**
+ * @private
+ */
+const S_LOG_METADA = "atx-log-metadata";
+/**
+ * @private
+ */
+const STYLE_ID = 'atx-log-container-style';
+/**
+ * An implementation of the `LogConnector` interface that processes logs as HTML renderable elements.
+ */
+class HtmlLogConnector {
+    /**
+     * Creates a new `HtmlLogConnector` instance.
      *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @param target The HTML element where the logs will be rendered.
+     * @param injectStyle Indicates whether the ATX default HTML styles are injected into the current document (`true`), or not (`false`).
      */
-    cacheControl(value = "no-cache") {
-        this.setHeader("Cache-Control", value);
-        return this;
+    constructor(target, injectStyle = true) {
+        /**
+         * @private
+         */
+        this._logs = [];
+        this._tgt = target;
+        if (injectStyle)
+            this.injectStyle();
     }
     /**
-     * Sets the `"CContent-Type"` property of the new `HttpHeaders` instance with the specified value.
-     *
-     * @param value The value used to set the `"Content-Type"` property of the new `HttpHeaders` instance.
-     * Default value is `"application/json; charset=utf-8"`.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    contentType(value = "application/json; charset=utf-8") {
-        this.setHeader("Content-Type", value);
-        return this;
+    init(logList) {
+        const len = logList.length - 1;
+        let i = 0;
+        for (; i <= len; ++i)
+            this.sendLog(logList[i]);
     }
     /**
-     * Sets the `"Priority"` property of the new `HttpHeaders` instance with the specified value.
-     *
-     * @param value The value used to set the `"Priority"` property of the new `HttpHeaders` instance.
-     * Default value is `"u=0, i"`.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    priority(value = "u=0, i") {
-        this.setHeader("Priority", value);
-        return this;
+    sendLog(log) {
+        this._logs.push(log);
+        this._tgt.appendChild(this.buildLog(log));
     }
     /**
-     * Sets the `"User-Agent"` property of the new `HttpHeaders` instance with the specified value.
-     *
-     * @param value The value used to set the `"User-Agent"` property of the new `HttpHeaders` instance.
-     * Default value is the navigator user agent.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    userAgent(value = null) {
-        this.setHeader("User-Agent", value || navigator.userAgent);
-        return this;
+    destroy() {
+        this._tgt = null;
+        this._logs.length = 0;
+        this._logs = null;
+        this.deleteStyle();
     }
     /**
-     * Sets the `"Accept-Language"` property of the new `HttpHeaders` instance with the specified value.
-     *
-     * @param value The value used to set the `"Accept-Language"` property of the new `HttpHeaders` instance.
-     * Default value is the navigator language.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    acceptLanguage(value = null) {
-        this.setHeader("Accept-Language", value || navigator.language);
-        return this;
+    clearLogs() {
+        this._logs.length = 0;
+        this._tgt.innerHTML = EMPTY_STRING;
     }
     /**
-     * Sets the `"Accept"` property of the new `HttpHeaders` instance with the specified value.
-     *
-     * @param value The value used to set the `"Accept"` property of the new `HttpHeaders` instance.
-     * Default value is `'*\/*'`.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @inheritdoc
      */
-    accept(value = "*/*") {
-        this.setHeader("Accept", value);
-        return this;
+    copyLogs() {
+        const logs = LogUtil.logListToString(this._logs);
+        navigator.clipboard.writeText(logs);
     }
     /**
-     * Sets the `"Accept-Encoding"` property of the new `HttpHeaders` instance with the specified value.
-     *
-     * @param value The value used to set the `"Accept-Encoding"` property of the new `HttpHeaders` instance.
-     * Default value is `"ngzip, deflate, br, zstd"`.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @private
      */
-    acceptEncoding(value = "gzip, deflate, br, zstd") {
-        this.setHeader("Accept-Encoding", value);
-        return this;
+    buildLog(log) {
+        const d = document.createElement(DIV);
+        d.classList.add(this.getCssClassName(log.level));
+        d.appendChild(this.getSpan(`[${LogUtil.dateToHHMMSS(log.timestamp)}]`, S_LOG_TIME));
+        d.appendChild(this.getSpan(`[${LogUtil.getLevelString(log.level)}]`, S_LOG_LEVEL));
+        d.appendChild(this.getSpan(`[${log.caller}]`, S_LOG_CALLER));
+        d.appendChild(this.getSpan(`[${log.message}]`, S_LOG_MSG));
+        d.appendChild(this.getSpan(LogUtil.metadataToString(log.metadata), S_LOG_METADA));
+        return d;
     }
     /**
-     * Sets or modifies a value of the new `HttpHeaders` instance.
-     *
-     * @param name The header name.
-     * @param value The value or values to set or override for the given header.
-     *
-     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     * @private
      */
-    set(name, value) {
-        this.setHeader(name, value);
-        return this;
+    getCssClassName(level) {
+        if (level === LogLevel.INFO)
+            return S_LOG_INFO;
+        if (level === LogLevel.CONFIG)
+            return S_LOG_CONFIG;
+        if (level === LogLevel.ERROR)
+            return S_LOG_ERROR;
+        return S_WARN;
     }
     /**
-     * Return a new `HttpHeaders` instance, built from the properties specified with the
-     * `HttpHeadersMockBuilder` methods.
-     *
-     * @returns A new `HttpHeaders` instance.
+     * @private
      */
-    headers() {
-        return this._headers;
+    getSpan(value, style = null) {
+        const s = document.createElement(SPAN);
+        if (style)
+            s.classList.add(style);
+        s.innerText = value;
+        return s;
     }
     /**
      * @private
      */
-    setHeader(name, value) {
-        const values = Array.isArray(value) ? value.join(", ") : value;
-        this._headers = this._headers.set(name, values);
+    injectStyle() {
+        const style = document.createElement('style');
+        style.id = STYLE_ID;
+        style.innerHTML = ".atx-log-container{width:100%;background:black;font-family:monospace;font-size:14px;padding:10px 12px}.atx-log,.atx-config-log{color:white}.atx-error-log{color:red}.atx-warn-log{color:gold}.atx-log-metadata{color:#469afa}";
+        this._tgt.classList.add("atx-log-container");
+        this.getHead().appendChild(style);
+    }
+    /**
+     * @private
+     */
+    deleteStyle() {
+        const style = document.getElementById(STYLE_ID);
+        if (style)
+            this.getHead().removeChild(style);
+    }
+    /**
+     * @private
+     */
+    getHead() {
+        return document.getElementsByTagName('head')[0];
     }
 }
-/**
- * A utility function used to create new "chainable" `HttpHeadersMockBuilder` instances.
- *
- * @returns A new `HttpHeadersMockBuilder` instance;
- */
-const httpHeadersMock = () => new HttpHeadersMockBuilder();
 
 /**
  * @license
@@ -3383,84 +3457,92 @@ const httpHeadersMock = () => new HttpHeadersMockBuilder();
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
- * Defines the possible values for the `responseType` property of the
- * `FetchClientBuilder.buildFetchClient()` method.
+ * A convenient immutable instance of the `DefaultLogConnector` class.
  */
-var FetchClientResponseType;
-(function (FetchClientResponseType) {
+const DEFAULT_LOG_CONNECTOR = new DefaultLogConnector();
+/**
+ * The base class for all `Logger` objects.
+ */
+class AbstractLogger {
+    constructor() {
+        /**
+         * @inheritdoc
+         */
+        this.minLogLevel = LogLevel.INFO;
+        /**
+         * The list of logs sent to this logger.
+         */
+        this.logs = [];
+        /**
+         * The reference to the log connector associated with this logger.
+         */
+        this.logConnector = DEFAULT_LOG_CONNECTOR;
+    }
     /**
-     * Allows to return the response as a promise that resolves with an `ArrayBuffer`.
+     * @inheritdoc
      */
-    FetchClientResponseType["ARRAY_BUFFER"] = "arrayBuffer";
+    setLogConnector(value) {
+        this.logConnector = value || DEFAULT_LOG_CONNECTOR;
+        this.logConnector.init(this.logs);
+    }
     /**
-     * Allows to return the response as a promise that resolves with a `Blob`.
+     * @inheritdoc
      */
-    FetchClientResponseType["BLOB"] = "blob";
+    getLogConnector() {
+        return this.logConnector;
+    }
     /**
-     * Allows to return the response as a promise that resolves with a `FormData` object.
+     * @inheritdoc
      */
-    FetchClientResponseType["FORM_DATA"] = "formData";
+    getLogs() {
+        return this.logs;
+    }
     /**
-     * Allows to return the response as a promise which resolves with the result of parsing the body text as JSON.
+     * @inheritdoc
      */
-    FetchClientResponseType["JSON"] = "json";
+    info(caller, msg, metadata) {
+        this.addLog(caller, msg, LogLevel.INFO, metadata);
+    }
     /**
-     * Allows to return the response as a promise that resolves with a `String`.
-     * The response is always decoded using UTF-8.
+     * @inheritdoc
      */
-    FetchClientResponseType["TEXT"] = "text";
+    config(caller, msg, metadata) {
+        this.addLog(caller, msg, LogLevel.CONFIG, metadata);
+    }
     /**
-     * Allows to return the response as a promise that resolves with a `Response` object.
+     * @inheritdoc
      */
-    FetchClientResponseType["RESPONSE"] = "response";
-})(FetchClientResponseType || (FetchClientResponseType = {}));
-
-/**
- * @license
- * Copyright Pascal ECHEMANN. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be found in
- * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
- */
-/**
- * A static utility class for building `FetchClient` objects.
- */
-class FetchClientBuilder {
+    error(caller, msg, metadata) {
+        this.addLog(caller, msg, LogLevel.ERROR, metadata);
+    }
     /**
-     * Builds and returns a new `FetchClient` object.
-     *
-     * @param input The definition of the resource to fetch.
-     * @param init The object containing options to configure the request.
-     * @param responseType Specifies the type of response for the resource to fetch.
-     *
-     * @returns A new `FetchClient` object.
+     * @inheritdoc
      */
-    static buildFetchClient(input, init = null, responseType = FetchClientResponseType.JSON) {
-        return from(fetch(input, init || undefined).then((response) => {
-            const rspType = responseType;
-            if (response.ok)
-                return rspType !== FetchClientResponseType.RESPONSE ? FetchClientBuilder.buildResponseStrategy(response, rspType) : response;
-            throw new HttpErrorResponse({
-                status: response.status,
-                statusText: response.statusText
-            });
-        }));
+    warn(caller, msg, metadata) {
+        this.addLog(caller, msg, LogLevel.WARNING, metadata);
+    }
+    /**
+     * @inheritdoc
+     */
+    destroy() {
+        this.logConnector = null;
+        this.clearLogs();
+    }
+    /**
+     * @inheritdoc
+     */
+    clearLogs() {
+        this.logs.length = 0;
     }
     /**
      * @private
      */
-    static buildResponseStrategy(response, responseType) {
-        if (responseType === FetchClientResponseType.JSON)
-            return response.json();
-        if (responseType === FetchClientResponseType.BLOB)
-            return response.blob();
-        if (responseType === FetchClientResponseType.FORM_DATA)
-            return response.formData();
-        if (responseType === FetchClientResponseType.ARRAY_BUFFER)
-            return response.arrayBuffer();
-        if (responseType === FetchClientResponseType.TEXT)
-            return response.text();
-        return response.json();
+    addLog(caller, msg, level, metadata) {
+        if (level < this.minLogLevel)
+            return;
+        const log = LogBuilder.build(caller, msg, level, metadata);
+        this.logs.push(log);
+        this.logConnector.sendLog(log);
     }
 }
 
@@ -3472,43 +3554,21 @@ class FetchClientBuilder {
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
- * @private
- * A utility class used by delegate `XhrProxy` instances to dispatch `ProgressEvent`
- * instances.
- *
- * This class is not exposed.
+ * A static builder that creates new `Log` objects.
  */
-class ProgressEventMock extends ProgressEvent {
-    constructor() {
-        super(...arguments);
-        /**
-         * @private
-         */
-        this._total = NaN;
-        /**
-         * @private
-         */
-        this._loaded = 0;
-    }
-    /**
-     * A 64-bit unsigned integer indicating the size, in bytes, of the data already
-     * transmitted or processed.
-     */
-    set total(value) {
-        this._total = value;
-    }
-    get total() {
-        return this._total;
-    }
+class LogBuilder {
     /**
-     * A 64-bit unsigned integer indicating the total size, in bytes, of the data being
-     * transmitted or processed.
+     * Builds and returns a new `Log` object initialized with the specified parameters.
+     *
+     * @param caller The reference to the object that sends the new log.
+     * @param message The message of the new log.
+     * @param level The level of the new log.
+     * @param metadata The optional metadata associated with the new log.
+     *
+     * @returns A new `Log` object
      */
-    set loaded(value) {
-        this._loaded = value;
-    }
-    get loaded() {
-        return this._loaded;
+    static build(caller, message, level = LogLevel.INFO, metadata) {
+        return new LogImpl(caller, message, level, metadata);
     }
 }
 
@@ -3518,118 +3578,159 @@ class ProgressEventMock extends ProgressEvent {
  *
  * Use of this source code is governed by an MIT-style license that can be found in
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * A convenient string used to identify logs of LogLevel.INFO.
+ */
+const LOG_INFO_STRING = "INFO";
+/**
+ * A convenient string used to identify logs of LogLevel.CONFIG.
+ */
+const LOG_CONFIG_STRING = "CONFIG";
+/**
+ * A convenient string used to identify logs of LogLevel.WARNING.
+ */
+const LOG_WARNING_STRING = "WARNING";
+/**
+ * A convenient string used to identify logs of LogLevel.ERROR.
+ */
+const LOG_ERROR_STRING = "ERROR";
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * This source code is derived from the following original source code:
- * - https://github.com/benlesh/event-target-polyfill
- * - Copyright (c) 2020 Ben Lesh
- *
- * Use of the original source code is governed by an MIT-style license
- * that can be found in the LICENSE file at
- * https://github.com/benlesh/event-target-polyfill/blob/master/LICENSE
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
  */
-const ADD = "addEventListener";
+const TS_FMT = "HH:MM:SS";
 /**
  * @private
  */
-const REMOVE = "removeEventListener";
+const SEPARATOR = ", ";
 /**
  * @private
- * A utility class the provides an implementation for the `EventTarget` interface.
- * This class is used internally by the framework; please do not expose it.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
  */
-class EventTargetImpl {
+const R_BRACKET = "[";
+/**
+ * @private
+ */
+const L_BRACKET = "]";
+/**
+ * @private
+ */
+const LOCALE = "en-us";
+/**
+ * @private
+ */
+const getStringEnd = (cusror, size) => {
+    return cusror !== size ? SEPARATOR : EMPTY_STRING;
+};
+/**
+ * A convenient utility class for formatting logs.
+ */
+class LogUtil {
     /**
-     * @private
+     * Turns the specified log list into a human redeable string.
+     *
+     * @param logList The list of logs to format.
+     * @returns The formatted log list.
      */
-    constructor() {
-        this._listenerList = new Map();
+    static logListToString(logList) {
+        const len = logList.length - 1, getLevelString = LogUtil.getLevelString;
+        let logs = EMPTY_STRING, i = 0, levelTxt = EMPTY_STRING;
+        for (; i <= len; ++i) {
+            const log = logList[i];
+            logs += `[${LogUtil.dateToHHMMSS(log.timestamp)}][${getLevelString(log.level)}][${log.caller}][${log.message}]${LogUtil.metadataToString(log.metadata)}\n`;
+        }
+        return logs;
     }
     /**
-     * @private
-     * Sets up a function that will be called whenever the specified event is delivered to the target.
-     *
-     * @param type a case-sensitive string representing the event type to listen for.
-     * @param listener the object that receives a notification (an object that implements the
-     *                 `Event` interface) when an event of the specified type occurs.
-     * @param options an object that specifies characteristics about the event listener.
+     * Turns the specified log level into a human redeable string.
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+     * @param level The log level to format.
+     * @returns The formatted log level.
      */
-    addEventListener(type, listener, options) {
-        this.checkArgLength(arguments.length, ADD);
-        const ll = this._listenerList;
-        if (!ll.has(type))
-            ll.set(type, new Map());
-        const listenersForType = ll.get(type);
-        if (!listenersForType.has(listener)) {
-            // Any given listener is only registered once
-            listenersForType.set(listener, options);
-        }
+    static getLevelString(level) {
+        if (level === LogLevel.INFO)
+            return LOG_INFO_STRING;
+        if (level === LogLevel.CONFIG)
+            return LOG_CONFIG_STRING;
+        if (level === LogLevel.WARNING)
+            return LOG_WARNING_STRING;
+        if (level === LogLevel.ERROR)
+            return LOG_ERROR_STRING;
+        return EMPTY_STRING;
     }
     /**
-     * @private
-     * Removes an event listener previously registered with `EventTarget.addEventListener()` from the target.
-     *
-     * @param type a case-sensitive which specifies the type of event for which to remove an event listener.
-     * @param listener the event listener function of the event handler to remove from the event target.
-     * @param options An options object that specifies characteristics about the event listener.
+     * Return a string that represents the specified metadata object.
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
+     * @param obj The metadata object to format.
+     * @returns A string that represents the specified metadata object.
      */
-    removeEventListener(type, listener, options) {
-        this.checkArgLength(arguments.length, REMOVE);
-        const ll = this._listenerList;
-        if (ll.has(type)) {
-            const listenersForType = ll.get(type);
-            if (listenersForType.has(listener))
-                listenersForType.delete(listener);
+    static metadataToString(obj) {
+        let result = EMPTY_STRING;
+        if (!obj)
+            return result;
+        if (Array.isArray(obj))
+            return LogUtil.formatArray(obj);
+        const keys = Object.keys(obj), len = keys.length - 1;
+        let i = 0;
+        for (; i <= len; ++i) {
+            const key = keys[i];
+            const value = obj[key];
+            if (value === null)
+                result += `${key}=null${getStringEnd(i, len)}`;
+            else if (value === undefined)
+                result += `${key}=undefined${getStringEnd(i, len)}`;
+            else if (typeof value === STRING)
+                result += `${key}="${value}"${getStringEnd(i, len)}`;
+            else if (Array.isArray(value))
+                result += `${key}=${LogUtil.formatArray(value)}${getStringEnd(i, len)}`;
+            else if (typeof value === OBJECT)
+                result += `${key}=${LogUtil.metadataToString(value)}${getStringEnd(i, len)}`;
+            else
+                result += `${key}=${value}${getStringEnd(i, len)}`;
+        }
+        ;
+        if (result.endsWith(SEPARATOR)) {
+            result = result.slice(0, -2);
         }
+        return result !== EMPTY_STRING ? R_BRACKET + result + L_BRACKET : result;
     }
     /**
-     * @private
-     * Sends an `Event` to this to the `Event` object, (synchronously) invoking the affected event listeners
-     * in the appropriate order.
-     *
-     * @param event the `Event object to dispatch. Its Event.target property will be set to the current EventTarget.
-     * @returns true since there are no cancellable events on a base `EventTarget`.
+     * Returns a string that represents the specified timestamp in form `"HH:MM:SS"`.
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
+     * @param timestamp The timestamp to format.
+     * @returns A string that represents the specified timestamp in form `"HH:MM:SS"`.
      */
-    dispatchEvent(event) {
-        if (!(event instanceof Event)) {
-            throw new TypeError("Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.");
-        }
-        const type = event.type;
-        const ll = this._listenerList;
-        const listenersForType = ll.get(type);
-        if (!listenersForType)
-            return true;
-        for (const listnerEntry of listenersForType.entries()) {
-            const listener = listnerEntry[0];
-            const options = listnerEntry[1];
-            // Listener functions must be executed with the EventTarget as the `this` context.
-            if (typeof listener === FUNCTION)
-                listener.call(this, event);
-            // Listener objects have their handleEvent method called, if they have one
-            else if (listener && typeof listener.handleEvent === FUNCTION)
-                listener.handleEvent(event);
-            if (options && options.once)
-                listenersForType.delete(listener);
-        }
-        return true;
+    static dateToHHMMSS(timestamp) {
+        return formatDate(timestamp, TS_FMT, LOCALE);
     }
     /**
-     * @private
+     * Returns a string that represents the specified array.
+     *
+     * @param array The array to format.
+     * @returns A tring that represents the specified array.
      */
-    checkArgLength(argLen, method) {
-        if (argLen < 2) {
-            throw new TypeError(`TypeError: Failed to execute '${method}' on 'EventTarget': 2 arguments required, but ${argLen === 1 ? 'only 1' : '0'} present.`);
+    static formatArray(array) {
+        const len = array.length - 1;
+        let i = 0, result = EMPTY_STRING;
+        for (; i <= len; ++i) {
+            const value = array[i];
+            if (typeof value === STRING)
+                result += `"${value}"${getStringEnd(i, len)}`;
+            else if (Array.isArray(value))
+                result += `${LogUtil.formatArray(value)}${getStringEnd(i, len)}`;
+            else if (typeof value === OBJECT)
+                result += `${LogUtil.metadataToString(value)}${getStringEnd(i, len)}`;
+            else
+                result += `${value}${getStringEnd(i, len)}`;
         }
+        return `[${result}]`;
     }
 }
 
@@ -3642,118 +3743,44 @@ class EventTargetImpl {
  */
 /**
  * @private
+ * The `Logger` implementation used by the `HttpMockLoggingService` class to manage logs.
+ */
+class HttpMockLogger extends AbstractLogger {
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Elemenets marked as "Useless" are never invoked by the Angular framework.
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
-class XhrBase extends EventTargetImpl {
-    constructor() {
-        super(...arguments);
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API
-         */
-        this.UNSENT = 0;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API
-         */
-        this.OPENED = 1;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API
-         */
-        this.HEADERS_RECEIVED = 2;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API
-         */
-        this.LOADING = 3;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API
-         */
-        this.DONE = 4;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API
-         */
-        this.withCredentials = false;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API - Useless
-         */
-        this.onabort = null;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API - Useless
-         */
-        this.onerror = null;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API - Useless
-         */
-        this.onload = null;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API - Useless
-         */
-        this.onloadend = null;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API - Useless
-         */
-        this.onloadstart = null;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API - Useless
-         */
-        this.onprogress = null;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API - Useless
-         */
-        this.onreadystatechange = null;
-        /**
-         * @private
-         *
-         * XMLHTTPRequest API - Useless
-         */
-        this.ontimeout = null;
-    }
+/**
+ * A utility enum that stores constants used by the `HttpMockLoggingService` to create log messages.
+ */
+var HttpMockLoggingConstant;
+(function (HttpMockLoggingConstant) {
     /**
      * @private
-     *
-     * XMLHTTPRequest API - Useless
+     * The "caller" reference for all logs of the HTTP Mocking Framework.
      */
-    get responseXML() {
-        return null;
-    }
+    HttpMockLoggingConstant["CALLER"] = "HTTP Mocking Framework";
     /**
      * @private
-     *
-     * XMLHTTPRequest API - Useless
+     * The "message" reference for all valid logs of the HTTP Mocking Framework.
      */
-    overrideMimeType(mime) { }
+    HttpMockLoggingConstant["RESPONSE_MESSAGE"] = "HTTP response";
     /**
      * @private
-     *
-     * XMLHTTPRequest API - Useless
+     * The "message" reference for all error logs of the HTTP Mocking Framework.
      */
-    getResponseHeader(name) { return null; }
-}
+    HttpMockLoggingConstant["ERROR_MESSAGE"] = "HTTP error";
+    /**
+     * @private
+     * The "message" reference for all prefetch logs of the HTTP Mocking Framework.
+     */
+    HttpMockLoggingConstant["CONFIG_MESSAGE"] = "HTTP prefetch";
+})(HttpMockLoggingConstant || (HttpMockLoggingConstant = {}));
 
 /**
  * @license
@@ -3764,50 +3791,102 @@ class XhrBase extends EventTargetImpl {
  */
 /**
  * @private
- * Internal reference to a new line character.
- */
-const NL = "\n";
-/**
- * @private
- * A set of static utilities for manipulating `HttpHeaders` objects.
+ *
+ * The utility service that manages the HTTP Mocking Framework logs.
  */
-class HttpHeadersUtil {
+class HttpMockLoggingService {
+    /**
+     * Returns the number of logs currently processed by this logger.
+     */
+    get size() {
+        return this._logger.getLogs().length;
+    }
     /**
      * @private
-     * Returns a string representation the the specified `HttpHeaders `object, compatible with the format
-     * expected by the `XMLHttpRequest.getAllResponseHeaders()` method.
+     */
+    constructor() {
+        this._logger = new HttpMockLogger();
+    }
+    /**
+     * Processes information logs with the specified metadata.
      *
-     * @param headers The `HttpHeaders` object to format.
+     * @param metadata The metadata associated with the HTTP method to log.
      *
-     * @returns A string compatible with the format expected by the `XMLHttpRequest.getAllResponseHeaders()` method.
+     * @return The log for the specified metadata.
      */
-    static stringify(headers) {
-        let result = EMPTY_STRING;
-        if (!headers)
-            return result;
-        const keys = headers.keys();
-        const last = keys.length - 1;
-        keys.forEach((key, index) => {
-            result += `${key}: ${headers.getAll(key)}${index !== last ? NL : EMPTY_STRING}`;
-        });
-        return result;
+    info(metadata) {
+        this._logger.info(HttpMockLoggingConstant.CALLER, HttpMockLoggingConstant.RESPONSE_MESSAGE, metadata);
+        return this.getLastLog();
     }
     /**
-     * @private
-     * Creates the default `HttpHeaders` object for a mocked HTTP request.
+     * Processes error logs with the specified metadata.
      *
-     * @returns The default `HttpHeaders` object for a mocked HTTP request.
+     * @param metadata The metadata associated with the HTTP method to log.
+     *
+     * @return The log for the specified metadata.
      */
-    static createDefaultRequestHeaders() {
-        // "Accept" header is set by Angular framework when missing
-        return httpHeadersMock().cacheControl()
-            .acceptEncoding()
-            .acceptLanguage()
-            .priority()
-            .userAgent()
-            .headers();
+    error(metadata) {
+        this._logger.error(HttpMockLoggingConstant.CALLER, HttpMockLoggingConstant.ERROR_MESSAGE, metadata);
+        return this.getLastLog();
+    }
+    /**
+     * Processes a special kind of logs that are used to indicate that a HTTP operation
+     * started and no response is available yet.
+     *
+     * @param metadata The metadata associated with the HTTP method to log.
+     */
+    prefetch(metadata) {
+        this._logger.config(HttpMockLoggingConstant.CALLER, HttpMockLoggingConstant.CONFIG_MESSAGE, metadata);
+    }
+    /**
+     * @inheritdoc
+     */
+    clearLogs() {
+        this._logger.clearLogs();
+        this._logger.getLogConnector().clearLogs();
+    }
+    /**
+     * @inheritdoc
+     */
+    setLogConnector(value) {
+        this._logger.setLogConnector(value);
+    }
+    /**
+     * @inheritdoc
+     */
+    getLogConnector() {
+        return this._logger.getLogConnector();
+    }
+    /**
+     * @inheritdoc
+     */
+    destroy() {
+        if (this._logger)
+            this._logger.destroy();
+        this._logger = null;
+    }
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy() {
+        this.destroy();
+    }
+    /**
+     * @inheritdoc
+     */
+    getLastLog() {
+        const logs = this._logger.getLogs();
+        return logs[logs.length - 1];
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HttpMockLoggingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HttpMockLoggingService, providedIn: 'platform' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HttpMockLoggingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'platform'
+                }]
+        }], ctorParameters: () => [] });
 
 /**
  * @license
@@ -3817,31 +3896,18 @@ class HttpHeadersUtil {
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
- * @private
- * A static utility class for building `DataStorage` objects.
+ * A convenient high-level singleton that implements the `Logger` interface.
  */
-class DataStorageBuilder {
-    /**
-     * @private
-     * Builds and returns a new `DataStorage` objects.
-     *
-     * @param httpResponse The `HttpResponseMock` to be stored by the framework.
-     * @param data The data of the HTTP response to be stored by the framework.
-     *
-     * @returns A new `DataStorage` object.
-     */
-    static buildDataStorage(httpResponse, data) {
-        // TODO: add support for different data types (string, Blob, etc.)
-        const stringifiedData = data ? JSON.stringify(data) : EMPTY_STRING;
-        return {
-            httpResponse: httpResponse,
-            loaded: 0,
-            total: data ? new Blob([stringifiedData]).size : 0,
-            data: data,
-            stringifiedData: stringifiedData
-        };
-    }
+class LoggerService extends AbstractLogger {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: LoggerService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: LoggerService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: LoggerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 /**
  * @license
@@ -3851,500 +3917,2340 @@ class DataStorageBuilder {
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
- * @private
- * The maximum value for a delayed HTTP response.
- */
-const MAX_TIMER = 10000;
-/**
- * @private
- * Intenal "onreadystatechange" event.
+ * The definition function for the `@HttpMock` decorator.
+ *
+ * @param config The `HttpMockConfig` object used to initialize the HTTP Mocking Framework.
  */
-const READY_STATE_CHANGE_EVENT = new Event("onreadystatechange");
+const HttpMock = (config) => {
+    return (constructor) => {
+        const getMockService = (instance) => {
+            return Object.values(instance).find((v) => {
+                return (v.hasOwnProperty('type') && v.type === HTTP_MOCK_SERVICE);
+            });
+        };
+        const ngOnInit = constructor.prototype.ngOnInit;
+        const ngOnDestroy = constructor.prototype.ngOnDestroy;
+        const uiid = config.id || Uuid.build();
+        if (!ngOnDestroy)
+            throw new ReferenceError("Component must implement the OnDestroy interface.");
+        if (!ngOnInit)
+            throw new ReferenceError("Component must implement the OnInit interface.");
+        if (!config.id)
+            config.id = uiid;
+        constructor.prototype.ngOnInit = function () {
+            const mockService = getMockService(this);
+            if (!mockService)
+                throw new ReferenceError("No provider found for HttpMockService.");
+            mockService.addConfig(config);
+            ngOnInit.call(this);
+        };
+        constructor.prototype.ngOnDestroy = function () {
+            const mockService = getMockService(this);
+            // An exception is already thrown by the ngOnInit() method when HttpMockService is not provided.
+            // Following check statement prevents failure during Unit Testing:
+            if (mockService)
+                mockService.removeConfig(uiid);
+            ngOnDestroy.call(this);
+        };
+    };
+};
+
 /**
- * @private
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
-const EVT_PROPS_CONFIG = { writable: false, value: this };
 /**
- * @private
- * A utility class used as delegate of `XMLHttpRequest` functionalities when
- * a HTTP request is intercepted by the Mocking Framework .
+ * A statefull builder for creating new `HttpHeaders` instances.
  */
-class DelegateXhr extends XhrBase {
-    /**
-     * Returns the response body content.
-     *
-     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/response
-     */
-    get response() {
-        return this._dataStorage?.data || null;
+class HttpHeadersMockBuilder {
+    constructor() {
+        /**
+         * @private
+         */
+        this._headers = new HttpHeaders();
     }
     /**
-     * Returns the numerical HTTP status code of the `XMLHttpRequest` response.
+     * Sets the `"Cache-Control"` property of the new `HttpHeaders` instance with the specified value.
      *
-     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/status
+     * @param value The value used to set the `"Cache-Control"` property of the new `HttpHeaders` instance.
+     * Default value is `"no-cache"`.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
      */
-    get status() {
-        return this._status;
+    cacheControl(value = "no-cache") {
+        this.setHeader("Cache-Control", value);
+        return this;
     }
     /**
-     * Returns a string containing the response status message as returned by the HTTP server.
+     * Sets the `"CContent-Type"` property of the new `HttpHeaders` instance with the specified value.
      *
-     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/statusText
+     * @param value The value used to set the `"Content-Type"` property of the new `HttpHeaders` instance.
+     * Default value is `"application/json; charset=utf-8"`.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
      */
-    get statusText() {
-        return this._statusText;
+    contentType(value = "application/json; charset=utf-8") {
+        this.setHeader("Content-Type", value);
+        return this;
     }
     /**
-     * Returns the state the `XMLHttpRequest` client is in.
+     * Sets the `"Priority"` property of the new `HttpHeaders` instance with the specified value.
      *
-     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/readyState
+     * @param value The value used to set the `"Priority"` property of the new `HttpHeaders` instance.
+     * Default value is `"u=0, i"`.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
      */
-    get readyState() {
-        return this._readyState;
+    priority(value = "u=0, i") {
+        this.setHeader("Priority", value);
+        return this;
     }
     /**
-     * Returns the serialized URL of the response or the empty string if the URL is `null`.
+     * Sets the `"User-Agent"` property of the new `HttpHeaders` instance with the specified value.
      *
-     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/responseURL
+     * @param value The value used to set the `"User-Agent"` property of the new `HttpHeaders` instance.
+     * Default value is the navigator user agent.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
      */
-    get responseURL() {
-        return this._url;
+    userAgent(value = null) {
+        this.setHeader("User-Agent", value || navigator.userAgent);
+        return this;
     }
     /**
-     * Returns the text received from a server following a request being sent.
+     * Sets the `"Accept-Language"` property of the new `HttpHeaders` instance with the specified value.
      *
-     * Throws an `InvalidStateError` DOMException if responseType is not the empty string or "text".
+     * @param value The value used to set the `"Accept-Language"` property of the new `HttpHeaders` instance.
+     * Default value is the navigator language.
      *
-     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/responseText
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
      */
-    get responseText() {
-        return this._dataStorage?.stringifiedData || EMPTY_STRING;
+    acceptLanguage(value = null) {
+        this.setHeader("Accept-Language", value || navigator.language);
+        return this;
     }
     /**
-     *  Returns an `XMLHttpRequestUpload` object that can be observed to monitor an upload progress.
+     * Sets the `"Accept"` property of the new `HttpHeaders` instance with the specified value.
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/upload
+     * @param value The value used to set the `"Accept"` property of the new `HttpHeaders` instance.
+     * Default value is `'*\/*'`.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
      */
-    get upload() {
-        return null;
+    accept(value = "*/*") {
+        this.setHeader("Accept", value);
+        return this;
     }
     /**
-     * @private
+     * Sets the `"Accept-Encoding"` property of the new `HttpHeaders` instance with the specified value.
+     *
+     * @param value The value used to set the `"Accept-Encoding"` property of the new `HttpHeaders` instance.
+     * Default value is `"ngzip, deflate, br, zstd"`.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
      */
-    open(method, url, async, username, password) {
-        this._method = method;
-        this._url = url;
-        this.setReadyState(this.OPENED);
+    acceptEncoding(value = "gzip, deflate, br, zstd") {
+        this.setHeader("Accept-Encoding", value);
+        return this;
     }
     /**
-     * Aborts the request if it has already been sent. When a request is aborted, its `readyState`
-     * is changed to `XMLHttpRequest.UNSENT` and the request status code is set to `0`.
+     * Sets or modifies a value of the new `HttpHeaders` instance.
+     *
+     * @param name The header name.
+     * @param value The value or values to set or override for the given header.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
      */
-    abort() {
-        this._readyState = this.UNSENT;
-        this._status = 0;
-        this.eventDispatch("abort");
+    set(name, value) {
+        this.setHeader(name, value);
+        return this;
     }
     /**
-     * Returns all the response headers, separated by CRLF, as a string, or returns `null`
-     * if no response has been received.
+     * Return a new `HttpHeaders` instance, built from the properties specified with the
+     * `HttpHeadersMockBuilder` methods.
      *
-     * @returns All the response headers, separated by CRLF, as a string, or returns `null`
-     *          if no response has been received.
+     * @returns A new `HttpHeaders` instance.
      */
-    getAllResponseHeaders() {
-        return this._dataStorage ? HttpHeadersUtil.stringify(this._headers) : EMPTY_STRING;
+    headers() {
+        return this._headers;
     }
     /**
-     * Sends the request to the server.
-     *
-     * @param body A body of data to be sent in the XHR request.
+     * @private
      */
-    send(body) {
-        const request = this.buildHttpRequest(body);
+    setHeader(name, value) {
+        const values = Array.isArray(value) ? value.join(", ") : value;
+        this._headers = this._headers.set(name, values);
+    }
+}
+/**
+ * A utility function used to create new "chainable" `HttpHeadersMockBuilder` instances.
+ *
+ * @returns A new `HttpHeadersMockBuilder` instance;
+ */
+const httpHeadersMock = () => new HttpHeadersMockBuilder();
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ * Internal reference to a new line character.
+ */
+const CRLF = "\r\n";
+/**
+ * @private
+ * A set of static utilities for manipulating `HttpHeaders` objects.
+ */
+class HttpHeadersUtil {
+    /**
+     * @private
+     * Returns a string representation the the specified `HttpHeaders `object, compatible with the format
+     * expected by the `XMLHttpRequest.getAllResponseHeaders()` method.
+     *
+     * @param headers The `HttpHeaders` object to format.
+     *
+     * @returns A string compatible with the format expected by the `XMLHttpRequest.getAllResponseHeaders()` method.
+     */
+    static stringify(headers) {
+        let result = EMPTY_STRING;
+        if (!headers)
+            return result;
+        const keys = headers.keys();
+        const last = keys.length - 1;
+        keys.forEach((key, index) => {
+            result += `${key}: ${headers.getAll(key)}${index !== last ? CRLF : EMPTY_STRING}`;
+        });
+        return result;
+    }
+    /**
+     * @private
+     * Returns a `HttpHeaders` object built from the string returns by the `XMLHttpRequest.getAllResponseHeaders()` method,
+     * or `null` wheher  `XMLHttpRequest.getAllResponseHeaders()` return `null`.
+     *
+     * @param value The string to turn into a `HttpHeaders `object.
+     *
+     * @returns A `HttpHeaders` object, or `null`.
+     */
+    static encode(value) {
+        if (value === null)
+            return null;
+        return new HttpHeaders(value);
+    }
+    /**
+     * @private
+     * Creates the default `HttpHeaders` object for a mocked HTTP request.
+     *
+     * @returns The default `HttpHeaders` object for a mocked HTTP request.
+     */
+    static createDefaultRequestHeaders() {
+        // "Accept" header is set by Angular framework when missing
+        return httpHeadersMock().cacheControl()
+            .acceptEncoding()
+            .acceptLanguage()
+            .priority()
+            .userAgent()
+            .headers();
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * A convenient constant that represents the maximum value for a delayed HTTP response.
+ */
+const HTTP_MOCK_MAX_DELAY = 10000;
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ */
+const OK = "OK";
+/**
+ * A statefull builder for creating new `HttpResponseMock` instances.
+ */
+class HttpResponseMockBuilder {
+    constructor() {
+        /**
+         * @private
+         */
+        this._response = {
+            url: null,
+            body: null,
+            status: HttpStatusCode.Ok,
+            statusText: OK,
+            error: null,
+            delay: 0
+        };
+    }
+    /**
+     * Sets the body property of the new `HttpResponseMock` instance with the specified `body` value.
+     *
+     * @param body The value used to set the body property of the new `HttpResponseMock` instance.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     */
+    body(body) {
+        this._response.body = body;
+        return this;
+    }
+    /**
+     * Sets the headers property of the new `HttpResponseMock` instance with the specified `headers` value.
+     *
+     * @param headers The value used to set the `headers` property of the new `HttpResponseMock` instance.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     */
+    headers(headers) {
+        this._response.headers = headers;
+        return this;
+    }
+    /**
+     * Add the list of HTTP headers generated by the `HttpHeadersUtil.createDefaultRequestHeaders()`
+     * to the mock response.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     */
+    defaultHeaders() {
+        const defaultHeaders = HttpHeadersUtil.createDefaultRequestHeaders();
+        let headers = this._response.headers;
+        if (headers) {
+            const keys = defaultHeaders.keys();
+            keys.forEach(key => headers?.append(key, defaultHeaders.get(key)));
+        }
+        else
+            headers = defaultHeaders;
+        this._response.headers = headers;
+        return this;
+    }
+    /**
+     * Sets the `status` property of the new `HttpResponseMock` instance with the specified `status` value.
+     *
+     * @param status The value used to set the `status` property of the new `HttpResponseMock` instance.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     */
+    status(status) {
+        this._response.status = status;
+        return this;
+    }
+    /**
+     * Sets the `statusText` property of the new `HttpResponseMock` instance with the specified `statusText` value.
+     *
+     * @param statusText The value used to set the `statusText` property of the new `HttpResponseMock` instance.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     */
+    statusText(statusText) {
+        this._response.statusText = statusText;
+        return this;
+    }
+    /**
+     * Sets the `url` property of the new `HttpResponseMock` instance with the specified `url` value.
+     *
+     * @param url The value used to set the `url` property of the new `HttpResponseMock` instance.
+     *
+     * @returns A reference to this `HttpResponseMockBuilder` instance.
+     */
+    url(url) {
+        this._response.url = url;
+        return this;
+    }
+    /**
+     * @private
+     * Overload implementation
+     */
+    delay(...arg) {
+        if (arg.length <= 1) {
+            let timer = arg[0] || NaN;
+            if (isNaN(timer)) {
+                this._response.delay = HTTP_MOCK_MAX_DELAY - Math.random() * HTTP_MOCK_MAX_DELAY;
+                return this;
+            }
+            if (timer > HTTP_MOCK_MAX_DELAY) {
+                this._response.delay = HTTP_MOCK_MAX_DELAY;
+                return this;
+            }
+            if (timer < 0)
+                timer = 0;
+            this._response.delay = timer;
+            return this;
+        }
+        let min = arg[0], max = arg[1];
+        if (max > HTTP_MOCK_MAX_DELAY)
+            max = HTTP_MOCK_MAX_DELAY;
+        if (min < 0 || min > max)
+            min = 0;
+        this._response.delay = Math.floor(Math.random() * (max - min) + min);
+        return this;
+    }
+    /**
+     * Returns a new `HttpResponseMock` instance, built from the properties specified with the
+     * `HttpResponseMockBuilder` methods.
+     *
+     * @param error An optional value used to set the `error` property of the new `HttpResponseMock` instance.
+     *              The `error` parameter values take precedence over all other properties of the `HttpResponseMock`
+     *              instance.
+     * @returns A new `HttpResponseMock` instance.
+     */
+    response(error = null) {
+        this._response.error = error;
+        return this._response;
+    }
+}
+/**
+ * A utility function used to create new "chainable" `HttpResponseMockBuilder` instances.
+ *
+ * @returns A new `HttpResponseMockBuilder` instance.
+ */
+const httpResponseMock = () => new HttpResponseMockBuilder();
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * Defines the possible values for the `responseType` property of the
+ * `FetchClientBuilder.buildFetchClient()` method.
+ */
+var FetchClientResponseType;
+(function (FetchClientResponseType) {
+    /**
+     * Allows to return the response as a promise that resolves with an `ArrayBuffer`.
+     */
+    FetchClientResponseType["ARRAY_BUFFER"] = "arrayBuffer";
+    /**
+     * Allows to return the response as a promise that resolves with a `Blob`.
+     */
+    FetchClientResponseType["BLOB"] = "blob";
+    /**
+     * Allows to return the response as a promise that resolves with a `FormData` object.
+     */
+    FetchClientResponseType["FORM_DATA"] = "formData";
+    /**
+     * Allows to return the response as a promise which resolves with the result of parsing the body text as JSON.
+     */
+    FetchClientResponseType["JSON"] = "json";
+    /**
+     * Allows to return the response as a promise that resolves with a `String`.
+     * The response is always decoded using UTF-8.
+     */
+    FetchClientResponseType["TEXT"] = "text";
+    /**
+     * Allows to return the response as a promise that resolves with a `Response` object.
+     */
+    FetchClientResponseType["RESPONSE"] = "response";
+})(FetchClientResponseType || (FetchClientResponseType = {}));
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * A static utility class for building `FetchClient` objects.
+ */
+class FetchClientBuilder {
+    /**
+     * Builds and returns a new `FetchClient` object.
+     *
+     * @param input The definition of the resource to fetch.
+     * @param init The object containing options to configure the request.
+     * @param responseType Specifies the type of response for the resource to fetch.
+     *
+     * @returns A new `FetchClient` object.
+     */
+    static buildFetchClient(input, init = null, responseType = FetchClientResponseType.JSON) {
+        return from(fetch(input, init || undefined).then((response) => {
+            const rspType = responseType;
+            if (response.ok)
+                return rspType !== FetchClientResponseType.RESPONSE ? FetchClientBuilder.buildResponseStrategy(response, rspType) : response;
+            throw new HttpErrorResponse({
+                status: response.status,
+                statusText: response.statusText
+            });
+        }));
+    }
+    /**
+     * @private
+     */
+    static buildResponseStrategy(response, responseType) {
+        if (responseType === FetchClientResponseType.JSON)
+            return response.json();
+        if (responseType === FetchClientResponseType.BLOB)
+            return response.blob();
+        if (responseType === FetchClientResponseType.FORM_DATA)
+            return response.formData();
+        if (responseType === FetchClientResponseType.ARRAY_BUFFER)
+            return response.arrayBuffer();
+        if (responseType === FetchClientResponseType.TEXT)
+            return response.text();
+        return response.json();
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ * A utility class used by delegate `XhrProxy` instances to dispatch `ProgressEvent`
+ * instances.
+ *
+ * This class is not exposed.
+ */
+class ProgressEventMock extends ProgressEvent {
+    constructor() {
+        super(...arguments);
+        /**
+         * @private
+         */
+        this._total = NaN;
+        /**
+         * @private
+         */
+        this._loaded = 0;
+    }
+    /**
+     * A 64-bit unsigned integer indicating the size, in bytes, of the data already
+     * transmitted or processed.
+     */
+    set total(value) {
+        this._total = value;
+    }
+    get total() {
+        return this._total;
+    }
+    /**
+     * A 64-bit unsigned integer indicating the total size, in bytes, of the data being
+     * transmitted or processed.
+     */
+    set loaded(value) {
+        this._loaded = value;
+    }
+    get loaded() {
+        return this._loaded;
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ *
+ * This source code is derived from the following original source code:
+ * - https://github.com/benlesh/event-target-polyfill
+ * - Copyright (c) 2020 Ben Lesh
+ *
+ * Use of the original source code is governed by an MIT-style license
+ * that can be found in the LICENSE file at
+ * https://github.com/benlesh/event-target-polyfill/blob/master/LICENSE
+ */
+/**
+ * @private
+ */
+const ADD = "addEventListener";
+/**
+ * @private
+ */
+const REMOVE = "removeEventListener";
+/**
+ * @private
+ * A utility class the provides an implementation for the `EventTarget` interface.
+ * This class is used internally by the framework; please do not expose it.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
+ */
+class EventTargetImpl {
+    /**
+     * @private
+     */
+    constructor() {
+        this._listenerList = new Map();
+    }
+    /**
+     * @private
+     * Sets up a function that will be called whenever the specified event is delivered to the target.
+     *
+     * @param type a case-sensitive string representing the event type to listen for.
+     * @param listener the object that receives a notification (an object that implements the
+     *                 `Event` interface) when an event of the specified type occurs.
+     * @param options an object that specifies characteristics about the event listener.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+     */
+    addEventListener(type, listener, options) {
+        this.checkArgLength(arguments.length, ADD);
+        const ll = this._listenerList;
+        if (!ll.has(type))
+            ll.set(type, new Map());
+        const listenersForType = ll.get(type);
+        if (!listenersForType.has(listener)) {
+            // Any given listener is only registered once
+            listenersForType.set(listener, options);
+        }
+    }
+    /**
+     * @private
+     * Removes an event listener previously registered with `EventTarget.addEventListener()` from the target.
+     *
+     * @param type a case-sensitive which specifies the type of event for which to remove an event listener.
+     * @param listener the event listener function of the event handler to remove from the event target.
+     * @param options An options object that specifies characteristics about the event listener.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
+     */
+    removeEventListener(type, listener, options) {
+        this.checkArgLength(arguments.length, REMOVE);
+        const ll = this._listenerList;
+        if (ll.has(type)) {
+            const listenersForType = ll.get(type);
+            if (listenersForType.has(listener))
+                listenersForType.delete(listener);
+            if (listenersForType.size === 0)
+                ll.delete(type);
+        }
+    }
+    /**
+     * @private
+     * Sends an `Event` to this to the `Event` object, (synchronously) invoking the affected event listeners
+     * in the appropriate order.
+     *
+     * @param event the `Event object to dispatch. Its Event.target property will be set to the current EventTarget.
+     * @returns true since there are no cancellable events on a base `EventTarget`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
+     */
+    dispatchEvent(event) {
+        if (!(event instanceof Event)) {
+            throw new TypeError("Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.");
+        }
+        const type = event.type;
+        const ll = this._listenerList;
+        const listenersForType = ll.get(type);
+        if (!listenersForType)
+            return true;
+        for (const listnerEntry of listenersForType.entries()) {
+            const listener = listnerEntry[0];
+            const options = listnerEntry[1];
+            // Listener functions must be executed with the EventTarget as the `this` context.
+            if (typeof listener === FUNCTION)
+                listener.call(this, event);
+            // Listener objects have their handleEvent method called, if they have one
+            else if (listener && typeof listener.handleEvent === FUNCTION)
+                listener.handleEvent(event);
+            if (options && options.once)
+                listenersForType.delete(listener);
+            if (listenersForType.size === 0)
+                ll.delete(type);
+        }
+        return true;
+    }
+    /**
+     * Checks whether the `EventTarget` object has any listeners registered for a specific type of event.
+     *
+     * @param type The type of event.
+     *
+     * @return  A value of `true` if a listener of the specified type is registered; `false` otherwise.
+     */
+    hasEventListener(type) {
+        return this._listenerList.has(type);
+    }
+    /**
+     * @private
+     */
+    checkArgLength(argLen, method) {
+        if (argLen < 2) {
+            throw new TypeError(`TypeError: Failed to execute '${method}' on 'EventTarget': 2 arguments required, but ${argLen === 1 ? 'only 1' : '0'} present.`);
+        }
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ *
+ * Elemenets marked as "Useless" are never invoked by the Angular framework.
+ */
+class XhrBase extends EventTargetImpl {
+    constructor() {
+        super(...arguments);
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API
+         */
+        this.UNSENT = 0;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API
+         */
+        this.OPENED = 1;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API
+         */
+        this.HEADERS_RECEIVED = 2;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API
+         */
+        this.LOADING = 3;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API
+         */
+        this.DONE = 4;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API
+         */
+        this.withCredentials = false;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API - Useless
+         */
+        this.onabort = null;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API - Useless
+         */
+        this.onerror = null;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API - Useless
+         */
+        this.onload = null;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API - Useless
+         */
+        this.onloadend = null;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API - Useless
+         */
+        this.onloadstart = null;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API - Useless
+         */
+        this.onprogress = null;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API - Useless
+         */
+        this.onreadystatechange = null;
+        /**
+         * @private
+         *
+         * XMLHTTPRequest API - Useless
+         */
+        this.ontimeout = null;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API - Useless
+     */
+    get responseXML() {
+        return null;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API - Useless
+     */
+    overrideMimeType(mime) { }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API - Useless
+     */
+    getResponseHeader(name) { return null; }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ * A static utility class for building `DataStorage` objects.
+ */
+class DataStorageBuilder {
+    /**
+     * @private
+     * Builds and returns a new `DataStorage` objects.
+     *
+     * @param httpResponse The `HttpResponseMock` to be stored by the framework.
+     * @param data The data of the HTTP response to be stored by the framework.
+     * @param metadata The metadata of the HTTP mock request to be stored by the framework.
+     *
+     * @returns A new `DataStorage` object.
+     */
+    static buildDataStorage(httpResponse, data, metadata) {
+        // TODO: add support for different data types (string, Blob, etc.)
+        const stringifiedData = data ? JSON.stringify(data) : EMPTY_STRING;
+        return {
+            httpResponse: httpResponse,
+            loaded: 0,
+            total: data ? new Blob([stringifiedData]).size : 0,
+            data: data,
+            stringifiedData: stringifiedData,
+            requestMetadata: metadata
+        };
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ * A static builder for creating `HttpMockLoggingMetadata` objects.
+ */
+class HttpMockLoggingMetadataBuilder {
+    /**
+     * @private
+     * Creates and returns a new `HttpMockLoggingMetadata` object.
+     */
+    static build(xhr, request, requestMetadata) {
+        const responseInit = {
+            body: xhr.response,
+            status: xhr.status,
+            statusText: xhr.statusText,
+            url: xhr.responseURL,
+            headers: HttpHeadersUtil.encode(xhr.getAllResponseHeaders())
+        };
+        const response = new HttpResponse(responseInit);
+        return {
+            request: request,
+            response: response,
+            requestMetadata: requestMetadata
+        };
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ * A utility for managing HTTP responses delay.
+ */
+class HttpMockResponseDelayUtil {
+    /**
+     * @private
+     * A utility function that return a `ResponseDelay` object, depending on the timer parameters.
+     *
+     * @param timer The seed value used to create the  `ResponseDelay` object.
+     * @returns A `ResponseDelay` object.
+     */
+    static getResponseDelay(timer) {
+        let duration = timer;
+        if (timer < 0)
+            duration = 0;
+        if (timer > HTTP_MOCK_MAX_DELAY)
+            duration = HTTP_MOCK_MAX_DELAY;
+        return {
+            stalled: Math.random() * duration,
+            duration: duration
+        };
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ * Intenal "onreadystatechange" event.
+ */
+const READY_STATE_CHANGE_EVENT = new Event("onreadystatechange");
+/**
+ * @private
+ */
+const EVT_PROPS_CONFIG = { writable: false, value: this };
+/**
+ * @private
+ * A utility class used as delegate of `XMLHttpRequest` functionalities when
+ * a HTTP request is intercepted by the Mocking Framework .
+ */
+class DelegateXhr extends XhrBase {
+    /**
+     * Returns the response body content.
+     *
+     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/response
+     */
+    get response() {
+        return this._dataStorage?.data || null;
+    }
+    /**
+     * Returns the numerical HTTP status code of the `XMLHttpRequest` response.
+     *
+     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/status
+     */
+    get status() {
+        return this._status;
+    }
+    /**
+     * Returns a string containing the response status message as returned by the HTTP server.
+     *
+     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/statusText
+     */
+    get statusText() {
+        return this._statusText;
+    }
+    /**
+     * Returns the state the `XMLHttpRequest` client is in.
+     *
+     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/readyState
+     */
+    get readyState() {
+        return this._readyState;
+    }
+    /**
+     * Returns the serialized URL of the response or the empty string if the URL is `null`.
+     *
+     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/responseURL
+     */
+    get responseURL() {
+        return this._url;
+    }
+    /**
+     * Returns the text received from a server following a request being sent.
+     *
+     * Throws an `InvalidStateError` DOMException if responseType is not the empty string or "text".
+     *
+     * @see https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/responseText
+     */
+    get responseText() {
+        return this._dataStorage?.stringifiedData || EMPTY_STRING;
+    }
+    /**
+     *  Returns an `XMLHttpRequestUpload` object that can be observed to monitor an upload progress.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/upload
+     */
+    get upload() {
+        return null;
+    }
+    /**
+     * @private
+     */
+    open(method, url, async, username, password) {
+        this._method = method;
+        this._url = url;
+        this.setReadyState(this.OPENED);
+    }
+    /**
+     * Aborts the request if it has already been sent. When a request is aborted, its `readyState`
+     * is changed to `XMLHttpRequest.UNSENT` and the request status code is set to `0`.
+     */
+    abort() {
+        this._readyState = this.UNSENT;
+        this._status = 0;
+        this.eventDispatch("abort");
+    }
+    /**
+     * Returns all the response headers, separated by CRLF, as a string, or returns `null`
+     * if no response has been received.
+     *
+     * @returns All the response headers, separated by CRLF, as a string, or returns `null`
+     *          if no response has been received.
+     */
+    getAllResponseHeaders() {
+        if (this._readyState < this.HEADERS_RECEIVED)
+            return null;
+        const respHeaders = this._dataStorage?.httpResponse.headers;
+        if (respHeaders)
+            return HttpHeadersUtil.stringify(respHeaders);
+        return null;
+    }
+    /**
+     * Sends the request to the server.
+     *
+     * @param body A body of data to be sent in the XHR request.
+     */
+    send(body) {
+        const start = this.now();
+        const request = this.buildHttpRequest(body);
         const rc = this._routeConfig;
         const httpResponseMock = rc.methodConfig.data(request, rc.parameters);
-        let timer = httpResponseMock.delay || 0;
-        if (timer > MAX_TIMER)
-            timer = MAX_TIMER;
+        const responseDelay = HttpMockResponseDelayUtil.getResponseDelay(httpResponseMock.delay || 0);
+        const timer = responseDelay.duration;
+        const requestMetadata = {
+            start: start,
+            stalled: responseDelay.stalled,
+            duration: timer,
+            url: new URL(this._url),
+            id: Uuid.build()
+        };
+        const prefetchMetadata = {
+            request: request,
+            requestMetadata: requestMetadata
+        };
+        this._logger.prefetch(prefetchMetadata);
         this._loadSubscription = this.loadData(httpResponseMock).subscribe({
             next: (data) => {
-                this.setDataStorage(httpResponseMock, data);
+                this.setDataStorage(httpResponseMock, requestMetadata, data);
                 const error = this._dataStorage.httpResponse.error;
                 setTimeout(() => {
                     this.setReadyState(this.HEADERS_RECEIVED);
                     if (error)
-                        return this.onError(error);
+                        return this.onError(request, error);
                     this.setReadyState(this.LOADING);
                     const response = this._dataStorage.httpResponse;
-                    let headers = response.headers;
-                    if (headers) {
-                        this._headers.keys().forEach((key) => {
-                            headers = headers.set(key, this._headers.get(key));
-                        });
-                        this._headers = headers;
-                    }
                     if (!this._progressiveDownload) {
                         this._statusText = response.statusText || EMPTY_STRING;
                         this._status = response.status || 0;
-                        return this.onLoadComplete();
+                        return this.onLoadComplete(request);
                     }
-                    this.doProgressiveDownload();
+                    this.doProgressiveDownload(request);
                 }, timer);
             },
             error: (err) => {
-                this.setDataStorage(httpResponseMock);
-                this.onError(err);
+                this.setDataStorage(httpResponseMock, requestMetadata);
+                this.onError(request, err);
+            }
+        });
+    }
+    /**
+     * Sets the value of an HTTP request header.
+     *
+     * @param name The name of the header whose value is to be set.
+     * @param value The value to set as the body of the header.
+     */
+    setRequestHeader(name, value) {
+        this._requestHeaders = this._requestHeaders.set(name, value);
+    }
+    /**
+     * @private
+     */
+    constructor(routeConfig, _logger) {
+        super();
+        this._logger = _logger;
+        /**
+         * @private
+         * Indicates whether the progressive download is activated, or not.
+         */
+        this._progressiveDownload = false;
+        /**
+         * @private
+         *
+         * Internal storage for HTTP response `data`.
+         */
+        this._dataStorage = null;
+        /**
+         * @private
+         *
+         * Internal storage for the HTTP request `readyState`.
+         */
+        this._readyState = this.UNSENT;
+        /**
+         * @private
+         *
+         * Internal storage for the HTTP request `headers`.
+         */
+        this._requestHeaders = null;
+        /**
+         * @private
+         *
+         * Internal storage for the HTTP request `status`.
+         */
+        this._status = 0;
+        /**
+         * @private
+         *
+         * Internal storage for the HTTP request `statusText`.
+         */
+        this._statusText = EMPTY_STRING;
+        /**
+         * @private
+         */
+        this._loadSubscription = null;
+        /**
+         *  Returns an an enumerated string value specifying the type of data contained in the response.
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType
+         */
+        this.responseType = EMPTY_STRING;
+        this._routeConfig = routeConfig;
+        // routeConfig.methodConfig.downloadManager
+        this._progressiveDownload = false;
+        this._requestHeaders = new HttpHeaders();
+    }
+    /**
+     * @private
+     * Internally used by the framework to delete a `DelegateXhr` instance.
+     */
+    destroy() {
+        this._routeConfig = null;
+        this._requestHeaders = null;
+        this._dataStorage = null;
+        if (this._loadSubscription) {
+            this._loadSubscription.unsubscribe();
+            this._loadSubscription = null;
+        }
+    }
+    /**
+     * @private
+     */
+    doProgressiveDownload(request) {
+        const total = this._dataStorage.total;
+        if (total <= 200) {
+            console.warn("[Angular Toolbox]: Body content is too small for emulating progressive download! Minimum size is 200 octets.");
+            return this.onLoadComplete(request);
+        }
+        // TODO: ameliorate the following process:
+        const self = this;
+        const chunckSize = Math.floor(total / 10);
+        let cursor = 0;
+        this._statusText = "Partial Content";
+        this._status = HttpStatusCode.PartialContent;
+        const idx = setInterval(() => {
+            cursor += chunckSize;
+            if (cursor > total) {
+                cursor = total;
+                clearInterval(idx);
+                self.onLoadComplete(request);
             }
-        });
+            else {
+                this._dataStorage.loaded = cursor;
+                self.dispatchProgressEvent();
+            }
+        }, 100);
+    }
+    finalizeRequestMetadata() {
+        const ds = this._dataStorage;
+        const metadata = ds.requestMetadata;
+        const duration = this.now() - metadata.start;
+        if (duration > metadata.duration)
+            metadata.duration = duration;
+        return metadata;
+    }
+    /**
+     * @private
+     */
+    onLoadComplete(request) {
+        this._dataStorage.loaded = this._dataStorage.total;
+        this.setReadyState(this.DONE);
+        this.dispatchProgressEvent("load");
+        this._logger.info(this.buildMetadata(request));
+    }
+    /**
+     * @private
+     */
+    onError(request, error) {
+        this._status = error.status;
+        this._statusText = error.statusText;
+        this.setReadyState(this.DONE);
+        this.dispatchProgressEvent("error");
+        this._logger.error(this.buildMetadata(request));
+    }
+    /**
+     * @private
+     */
+    buildMetadata(request) {
+        return HttpMockLoggingMetadataBuilder.build(this, request, this.finalizeRequestMetadata());
+    }
+    /**
+     * @private
+     */
+    eventDispatch(type) {
+        const event = new Event(type);
+        Object.defineProperty(event, 'target', EVT_PROPS_CONFIG);
+        Object.defineProperty(event, 'currentTarget', EVT_PROPS_CONFIG);
+        this.dispatchEvent(event);
+    }
+    /**
+     * @private
+     */
+    dispatchProgressEvent(type = "progress") {
+        const d = this._dataStorage;
+        const event = new ProgressEventMock(type);
+        event.loaded = d.loaded;
+        event.total = d.total;
+        this.dispatchEvent(event);
+    }
+    /**
+     * @private
+     */
+    setReadyState(state) {
+        this._readyState = state;
+        const event = this.onreadystatechange;
+        if (event)
+            event.call(this, READY_STATE_CHANGE_EVENT);
+    }
+    /**
+     * @private
+     */
+    loadData(httpResponseMock) {
+        const responseBody = httpResponseMock.body;
+        return (responseBody instanceof Observable) ? responseBody : of(responseBody);
+    }
+    /**
+     * @private
+     */
+    setDataStorage(responseMock, requestMetadata, data = null) {
+        this._dataStorage = DataStorageBuilder.buildDataStorage(responseMock, data, requestMetadata);
+    }
+    /**
+     * @private
+     */
+    buildHttpRequest(body) {
+        let params = new HttpParams();
+        const it = this._routeConfig.searchParams.entries();
+        for (const pair of it)
+            params = params.set(pair[0], pair[1]);
+        const init = {
+            params: params,
+            headers: this._requestHeaders,
+            withCredentials: this.withCredentials,
+            responseType: this.responseType,
+            reportProgress: this.hasEventListener("progress")
+            // context, transferCache: not used by Angular at this level of API
+        };
+        return new HttpRequest(this._method, this._url, body, init);
+    }
+    now() {
+        return Date.now();
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ * An error used as reference for unit testing.
+ * Angular framework calls `XMLHttpRequest` method only after the `open()` method invokation.
+ */
+const XHR_ERROR = (method) => {
+    throw new Error(`Attempt to call ${method}() method before calling open().`);
+};
+/**
+ * @private
+ * A XHR proxy that is used by the Mocking Framework to apply HTTP call strategies.
+ */
+class XhrProxyImpl extends XhrBase {
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    get response() {
+        return this.XHR ? this.XHR.response : undefined;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    get status() {
+        return this.XHR ? this.XHR.status : 0;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    get statusText() {
+        return this.XHR ? this.XHR.statusText : EMPTY_STRING;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    get readyState() {
+        return this.XHR ? this.XHR.readyState : this.UNSENT;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    get responseURL() {
+        return this.XHR ? this.XHR.responseURL : EMPTY_STRING;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    get responseText() {
+        return this.XHR ? this.XHR.responseText : EMPTY_STRING;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    get responseType() {
+        return this.XHR ? this.XHR.responseType : EMPTY_STRING;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    set responseType(value) {
+        if (!this.XHR)
+            XHR_ERROR("responseType");
+        this.XHR.responseType = value;
+    }
+    get upload() {
+        return this.XHR.upload;
+    }
+    open(method, url, async, username, password) {
+        const m = method.toString().toLowerCase();
+        const parsedUrl = URL.canParse(url) ? new URL(url) : new URL(this._httpMockService.getAppOrigin() + url);
+        const config = this._httpMockService.getRouteConfig(parsedUrl, m);
+        if (this.XHR && this.XHR instanceof DelegateXhr)
+            this.XHR.destroy();
+        this.XHR = config ? new DelegateXhr(config, this._logger) : new XMLHttpRequest();
+        this.XHR.withCredentials = this.withCredentials;
+        this.XHR.open(m.toString(), parsedUrl.toString());
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    abort() {
+        if (this.XHR)
+            return this.XHR.abort();
+        XHR_ERROR("abort");
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    getAllResponseHeaders() {
+        return this.XHR ? this.XHR.getAllResponseHeaders() : null;
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    addEventListener(type, listener, options) {
+        if (this.XHR)
+            return this.XHR.addEventListener(type, listener, options);
+        XHR_ERROR("addEventListener");
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
+     */
+    removeEventListener(type, listener, options) {
+        if (this.XHR)
+            return this.XHR.removeEventListener(type, listener, options);
+        XHR_ERROR("removeEventListener");
     }
     /**
-     * Sets the value of an HTTP request header.
+     * @private
      *
-     * @param name The name of the header whose value is to be set.
-     * @param value The value to set as the body of the header.
+     * XMLHTTPRequest API
+     */
+    send(body) {
+        if (this.XHR)
+            return this.XHR.send(body);
+        XHR_ERROR("send");
+    }
+    /**
+     * @private
+     *
+     * XMLHTTPRequest API
      */
     setRequestHeader(name, value) {
-        this._headers = this._headers.set(name, value);
+        if (this.XHR)
+            return this.XHR.setRequestHeader(name, value);
+        XHR_ERROR("setRequestHeader");
+    }
+    /**
+     * @private
+     *
+     * For Unit Testing only.
+     */
+    instanceOf(classRef) {
+        return this.XHR instanceof classRef;
     }
     /**
      * @private
      */
-    constructor(routeConfig) {
+    constructor(_httpMockService, _logger) {
         super();
+        this._httpMockService = _httpMockService;
+        this._logger = _logger;
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ * The concrete implementation of the `XhrFactory` interface.
+ */
+class XhrProxyFactoryImpl extends XhrFactory {
+    /**
+     * @private
+     */
+    constructor(_httpMockService, _logger) {
+        super();
+        this._httpMockService = _httpMockService;
+        this._logger = _logger;
+    }
+    /**
+     * @private
+     */
+    build() {
+        return new XhrProxyImpl(this._httpMockService, this._logger);
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * A factory function that creates and returns a new `XhrFactory` object.
+ *
+ * @returns A new `XhrFactory` object.
+ */
+const httpMockFactory = () => {
+    return new XhrProxyFactoryImpl(inject(HttpMockService), inject(HttpMockLoggingService$1));
+};
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * An implementation of the `LogConnector` class that sends logs to the HTTP
+ * mocking console component.
+ */
+class HttpMonitoringConsoleLogConnector {
+    constructor() {
         /**
-         * @private
-         * Indicates whether the progressive download is activated, or not.
-         */
-        this._progressiveDownload = false;
-        /**
-         * @private
-         *
-         * Internal storage for HTTP response `data`.
-         */
-        this._dataStorage = null;
-        /**
-         * @private
-         *
-         * Internal storage for the HTTP request `readyState`.
-         */
-        this._readyState = this.UNSENT;
-        /**
-         * @private
-         *
-         * Internal storage for the HTTP request `headers`.
-         */
-        this._headers = null;
-        /**
-         * @private
-         *
-         * Internal storage for the HTTP request `status`.
-         */
-        this._status = 0;
-        /**
-         * @private
-         *
-         * Internal storage for the HTTP request `statusText`.
-         */
-        this._statusText = EMPTY_STRING;
-        /**
-         * @private
-         */
-        this._loadSubscription = null;
-        /**
-         *  Returns an an enumerated string value specifying the type of data contained in the response.
          *
-         * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType
          */
-        this.responseType = "";
-        const methodConfig = routeConfig.methodConfig;
-        this._routeConfig = routeConfig;
-        this._progressiveDownload = methodConfig.progressive || false;
-        this.responseType = methodConfig.responseType || EMPTY_STRING;
-        this._headers = new HttpHeaders();
+        this.logs = [];
+        this.change = new EventEmitter(true);
     }
     /**
-     * @private
-     * Internally used by the framework to delete a `DelegateXhr` instance.
+     * @inheritdoc
      */
-    destroy() {
-        this._routeConfig = null;
-        this._headers = null;
-        this._dataStorage = null;
-        if (this._loadSubscription) {
-            this._loadSubscription.unsubscribe();
-            this._loadSubscription = null;
-        }
+    destroy() { }
+    /**
+     * @inheritdoc
+     */
+    init(logList) {
+        this.logs.push(...logList);
     }
     /**
-     * @private
+     * @inheritdoc
      */
-    doProgressiveDownload() {
-        const total = this._dataStorage.total;
-        if (total <= 200) {
-            console.warn("[Angular Toolbox]: Body content is too small for emulating progressive download! Minimum size is 200 octets.");
-            return this.onLoadComplete();
+    sendLog(log) {
+        const level = log.level;
+        if (level === LogLevel.INFO || LogLevel.ERROR)
+            this.logs.push(log);
+        this.change.emit(log);
+    }
+    /**
+     * @inheritdoc
+     */
+    clearLogs() {
+        this.logs.length = 0;
+    }
+    /**
+     * Not supported.
+     */
+    copyLogs() { }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class AtxJsonViewerPanelComponent {
+    constructor() {
+        this.data = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxJsonViewerPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AtxJsonViewerPanelComponent, isStandalone: true, selector: "atx-json-viewer-panel", inputs: { data: "data" }, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (data) {\r\n    @if (data.children) {\r\n        <details>\r\n            <summary>\r\n                @if (data.label) {\r\n                    <span class=\"atx-prop-label\">{{ data.label }}</span>:\r\n                    <span [ngClass]=\"data.typeClass\">{{ data.value }}</span>\r\n                } @else {\r\n                    {{ data.value }}\r\n                }\r\n            </summary>\r\n            @for (item of data.children; track item) {\r\n                <atx-json-viewer-panel [data]=\"item\"/>\r\n            }\r\n        </details>\r\n    } @else {\r\n        <div class=\"primitive\">\r\n            <span class=\"atx-prop-label\">{{ data.label }}</span>: <span [ngClass]=\"data.typeClass\">{{ data.value }}</span>\r\n        </div>\r\n    }\r\n}\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}:host{display:block;font-family:monospace;font-size:13px}summary:hover{background-color:var(--dark-gray)}summary{padding-left:6px}atx-json-viewer-panel{padding-left:26px}.primitive{margin-left:20px}.atx-prop-label{font-weight:700;color:#8a2be2}.atx-string{color:#cd5c5c}.atx-string:before,.atx-string:after{content:'\"'}.atx-boolean,.atx-null,.atx-number{color:#0000cd}.atx-boolean,.atx-null{font-weight:700}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"], dependencies: [{ kind: "component", type: AtxJsonViewerPanelComponent, selector: "atx-json-viewer-panel", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxJsonViewerPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-json-viewer-panel', standalone: true, imports: [
+                        CommonModule
+                    ], template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (data) {\r\n    @if (data.children) {\r\n        <details>\r\n            <summary>\r\n                @if (data.label) {\r\n                    <span class=\"atx-prop-label\">{{ data.label }}</span>:\r\n                    <span [ngClass]=\"data.typeClass\">{{ data.value }}</span>\r\n                } @else {\r\n                    {{ data.value }}\r\n                }\r\n            </summary>\r\n            @for (item of data.children; track item) {\r\n                <atx-json-viewer-panel [data]=\"item\"/>\r\n            }\r\n        </details>\r\n    } @else {\r\n        <div class=\"primitive\">\r\n            <span class=\"atx-prop-label\">{{ data.label }}</span>: <span [ngClass]=\"data.typeClass\">{{ data.value }}</span>\r\n        </div>\r\n    }\r\n}\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}:host{display:block;font-family:monospace;font-size:13px}summary:hover{background-color:var(--dark-gray)}summary{padding-left:6px}atx-json-viewer-panel{padding-left:26px}.primitive{margin-left:20px}.atx-prop-label{font-weight:700;color:#8a2be2}.atx-string{color:#cd5c5c}.atx-string:before,.atx-string:after{content:'\"'}.atx-boolean,.atx-null,.atx-number{color:#0000cd}.atx-boolean,.atx-null{font-weight:700}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+var ConsoleBodyType;
+(function (ConsoleBodyType) {
+    ConsoleBodyType[ConsoleBodyType["INVALID"] = -1] = "INVALID";
+    ConsoleBodyType[ConsoleBodyType["NULL"] = 0] = "NULL";
+    ConsoleBodyType[ConsoleBodyType["JSON"] = 1] = "JSON";
+    ConsoleBodyType[ConsoleBodyType["TEXT"] = 2] = "TEXT";
+    ConsoleBodyType[ConsoleBodyType["BLOB"] = 3] = "BLOB";
+    ConsoleBodyType[ConsoleBodyType["FORM_DATA"] = 4] = "FORM_DATA";
+    ConsoleBodyType[ConsoleBodyType["ARRAY_BUFFER"] = 5] = "ARRAY_BUFFER";
+})(ConsoleBodyType || (ConsoleBodyType = {}));
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+var ConsoleTypeClass;
+(function (ConsoleTypeClass) {
+    ConsoleTypeClass["OBJECT"] = "atx-object";
+    ConsoleTypeClass["STRING"] = "atx-string";
+    ConsoleTypeClass["NUMBER"] = "atx-number";
+    ConsoleTypeClass["BOOLEAN"] = "atx-boolean";
+    ConsoleTypeClass["ARRAY"] = "atx-array";
+    ConsoleTypeClass["NULL"] = "atx-null";
+})(ConsoleTypeClass || (ConsoleTypeClass = {}));
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+const NULL = "null";
+const ARR_END = '...]';
+const OBJ_END = '...}';
+class DataUtil {
+    static parseJson(obj, label) {
+        const primitive = typeof obj;
+        let type = ConsoleTypeClass.OBJECT, value = obj, children = null;
+        if (primitive === STRING)
+            type = ConsoleTypeClass.STRING;
+        else if (primitive === NUMBER)
+            type = ConsoleTypeClass.NUMBER;
+        else if (primitive === BOOLEAN)
+            type = ConsoleTypeClass.BOOLEAN;
+        else if (Array.isArray(obj)) {
+            const rawValue = JSON.stringify(obj);
+            let len = obj.length - 1;
+            let idx = 0;
+            type = ConsoleTypeClass.ARRAY;
+            value = rawValue.length > 50 ? rawValue.substring(0, 46) + ARR_END : rawValue;
+            children = [];
+            for (; len >= 0; len--) {
+                children.push(DataUtil.parseJson(obj[len], String(idx)));
+                idx++;
+            }
         }
-        // TODO: ameliorate the following process:
-        const self = this;
-        const chunckSize = Math.floor(total / 10);
-        let cursor = 0;
-        this._statusText = "Partial Content";
-        this._status = HttpStatusCode.PartialContent;
-        const idx = setInterval(() => {
-            cursor += chunckSize;
-            if (cursor > total) {
-                cursor = total;
-                clearInterval(idx);
-                self.onLoadComplete();
+        else if (obj === null) {
+            type = ConsoleTypeClass.NULL;
+            value = NULL;
+        }
+        else {
+            const keys = Object.keys(obj);
+            const rawValue = JSON.stringify(obj);
+            let len = keys.length - 1;
+            children = [];
+            for (; len >= 0; len--) {
+                const key = keys[len];
+                children.push(DataUtil.parseJson(obj[key], key));
             }
-            else {
-                this._dataStorage.loaded = cursor;
-                self.dispatchProgressEvent();
+            value = rawValue.length > 50 ? rawValue.substring(0, 46) + OBJ_END : rawValue;
+        }
+        return {
+            label: label,
+            typeClass: type,
+            value: value,
+            children: children
+        };
+    }
+    static getBodyType(obj) {
+        const primitive = typeof obj;
+        if (obj === null || obj === undefined)
+            return ConsoleBodyType.NULL;
+        if (primitive === STRING)
+            return ConsoleBodyType.TEXT;
+        if (obj instanceof Blob)
+            return ConsoleBodyType.BLOB;
+        if (obj instanceof FormData)
+            return ConsoleBodyType.FORM_DATA;
+        if (obj instanceof ArrayBuffer)
+            return ConsoleBodyType.ARRAY_BUFFER;
+        if (primitive === OBJECT)
+            return ConsoleBodyType.JSON;
+        return ConsoleBodyType.INVALID;
+    }
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class AtxJsonViewerComponent {
+    constructor() {
+        this.parsedData = null;
+    }
+    set data(value) {
+        if (!value) {
+            this.parsedData = null;
+            return;
+        }
+        this.parsedData = DataUtil.parseJson(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxJsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AtxJsonViewerComponent, isStandalone: true, selector: "atx-json-viewer", inputs: { data: "data" }, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n<atx-json-viewer-panel [data]=\"parsedData\"/>", styles: ["/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"], dependencies: [{ kind: "component", type: AtxJsonViewerPanelComponent, selector: "atx-json-viewer-panel", inputs: ["data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxJsonViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-json-viewer', standalone: true, imports: [
+                        AtxJsonViewerPanelComponent
+                    ], template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n<atx-json-viewer-panel [data]=\"parsedData\"/>", styles: ["/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class AtxPayloadRendererComponent {
+    set log(value) {
+        const request = value?.metadata.request;
+        const params = request.params;
+        const paramsKeys = params.keys();
+        const body = request.body;
+        const bodyType = DataUtil.getBodyType(body);
+        this.queryParams = this.formData = this.json = null;
+        if (paramsKeys.length > 0) {
+            this.queryParams = [];
+            paramsKeys.forEach(key => this.queryParams?.push({ key: key, value: params.get(key) }));
+        }
+        if (bodyType === ConsoleBodyType.FORM_DATA) {
+            this.formData = Array.from(body);
+        }
+        else if (bodyType === ConsoleBodyType.TEXT) {
+            this.json = JSON.parse(body);
+        }
+        this._cdr.detectChanges();
+    }
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this.json = null;
+        this.formData = null;
+        this.queryParams = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxPayloadRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AtxPayloadRendererComponent, isStandalone: true, selector: "atx-payload-renderer", inputs: { log: "log" }, ngImport: i0, template: "\r\n<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (queryParams) {\r\n    <details>\r\n        <summary>\r\n           Query String Parameters\r\n        </summary>\r\n        <div class=\"content\">\r\n            @for (item of queryParams; track item) {\r\n                <dl>\r\n                    <dt>{{ item.key }}:</dt>\r\n                    <dd>{{ item.value }}</dd>\r\n                </dl>\r\n            }\r\n        </div>\r\n    </details>\r\n}\r\n@if (json) {\r\n    <details>\r\n        <summary>\r\n            Request Payload\r\n        </summary>\r\n        <div class=\"content\">\r\n            <atx-json-viewer [data]=\"json\"/>\r\n        </div>\r\n    </details>\r\n} @else if (formData) {\r\n    <details>\r\n        <summary>\r\n            Form Data\r\n        </summary>\r\n        <div class=\"content\">\r\n            <ul>\r\n                @for (entry of formData; track entry) {\r\n                    <li>[ {{ entry }} ]</li>\r\n                }\r\n            </ul>\r\n        </div>\r\n    </details>\r\n}      \r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}details{border:1px solid var(--border-color)}summary{font-weight:700;padding:4px 6px}summary:hover{background-color:var(--dark-gray)}dl{display:flex;gap:6px;margin:0 0 0 20px}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"], dependencies: [{ kind: "component", type: AtxJsonViewerComponent, selector: "atx-json-viewer", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxPayloadRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-payload-renderer', standalone: true, imports: [
+                        AtxJsonViewerComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (queryParams) {\r\n    <details>\r\n        <summary>\r\n           Query String Parameters\r\n        </summary>\r\n        <div class=\"content\">\r\n            @for (item of queryParams; track item) {\r\n                <dl>\r\n                    <dt>{{ item.key }}:</dt>\r\n                    <dd>{{ item.value }}</dd>\r\n                </dl>\r\n            }\r\n        </div>\r\n    </details>\r\n}\r\n@if (json) {\r\n    <details>\r\n        <summary>\r\n            Request Payload\r\n        </summary>\r\n        <div class=\"content\">\r\n            <atx-json-viewer [data]=\"json\"/>\r\n        </div>\r\n    </details>\r\n} @else if (formData) {\r\n    <details>\r\n        <summary>\r\n            Form Data\r\n        </summary>\r\n        <div class=\"content\">\r\n            <ul>\r\n                @for (entry of formData; track entry) {\r\n                    <li>[ {{ entry }} ]</li>\r\n                }\r\n            </ul>\r\n        </div>\r\n    </details>\r\n}      \r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}details{border:1px solid var(--border-color)}summary{font-weight:700;padding:4px 6px}summary:hover{background-color:var(--dark-gray)}dl{display:flex;gap:6px;margin:0 0 0 20px}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { log: [{
+                type: Input
+            }] } });
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class AtxTimingRendererComponent {
+    constructor() {
+        this.hasData = false;
+        this.start = NaN;
+        this.downloadStart = NaN;
+        this.downloadLength = NaN;
+        this.duration = 0;
+        this.error = false;
+    }
+    set data(value) {
+        if (value) {
+            const metadata = value.metadata;
+            const requestMetadata = metadata.requestMetadata;
+            const duration = requestMetadata.duration;
+            const stalled = requestMetadata.stalled;
+            this.error = metadata.response.status >= 400;
+            this.hasData = true;
+            this.start = requestMetadata.start;
+            this.duration = duration;
+            if (duration === 0) {
+                this.downloadStart = this.downloadLength = 0;
+                return;
             }
-        }, 100);
+            const downloadLength = Math.round(100 * (duration - stalled) / duration);
+            this.downloadStart = 100 - downloadLength;
+            this.downloadLength = downloadLength;
+            return;
+        }
+        this.hasData = this.error = false;
+        this.start = this.downloadStart = this.downloadLength = NaN;
+        this.duration = 0;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxTimingRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AtxTimingRendererComponent, isStandalone: true, selector: "atx-timing-renderer", inputs: { data: "data" }, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n<section class=\"content\">\r\n@if (hasData) {\r\n    <dl>\r\n        <dt>Connection start</dt>\r\n        <dd>{{ start | date: 'short' }}</dd>\r\n    </dl>\r\n    <dl>\r\n        <dt>Request/Response</dt>\r\n        <dd class=\"timeline\">\r\n            <div>\r\n                <div [attr.style]=\"'width:' + downloadStart + '%'\">\r\n                    stalled\r\n                    <div class=\"stalled\"></div>\r\n                    <div class=\"time\">{{ downloadStart }} ms</div>\r\n                </div>\r\n                <div [attr.style]=\"'width:' + downloadLength + '%;margin-left:' + downloadStart + '%'\">\r\n                    download\r\n                    <div class=\"download\" [class.error]=\"error\"></div>\r\n                    <div class=\"time\">{{ duration }} ms</div>\r\n                </div>\r\n            </div>\r\n        </dd>\r\n    </dl>\r\n} \r\n</section>\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}.timeline{width:100%;margin-top:6px}.download,.stalled{width:100%;height:10px}.stalled{background-color:var(--dark-gray)}.time{text-align:right;padding-right:4px}.download{background-color:#00bfff}.error{background-color:red}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxTimingRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-timing-renderer', standalone: true, imports: [
+                        DatePipe,
+                        NgStyle
+                    ], template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n<section class=\"content\">\r\n@if (hasData) {\r\n    <dl>\r\n        <dt>Connection start</dt>\r\n        <dd>{{ start | date: 'short' }}</dd>\r\n    </dl>\r\n    <dl>\r\n        <dt>Request/Response</dt>\r\n        <dd class=\"timeline\">\r\n            <div>\r\n                <div [attr.style]=\"'width:' + downloadStart + '%'\">\r\n                    stalled\r\n                    <div class=\"stalled\"></div>\r\n                    <div class=\"time\">{{ downloadStart }} ms</div>\r\n                </div>\r\n                <div [attr.style]=\"'width:' + downloadLength + '%;margin-left:' + downloadStart + '%'\">\r\n                    download\r\n                    <div class=\"download\" [class.error]=\"error\"></div>\r\n                    <div class=\"time\">{{ duration }} ms</div>\r\n                </div>\r\n            </div>\r\n        </dd>\r\n    </dl>\r\n} \r\n</section>\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}.timeline{width:100%;margin-top:6px}.download,.stalled{width:100%;height:10px}.stalled{background-color:var(--dark-gray)}.time{text-align:right;padding-right:4px}.download{background-color:#00bfff}.error{background-color:red}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+/**
+ * A basic implementation of a HTML sanitization pipe.
+ */
+class SafeHtmlPipe {
     /**
      * @private
      */
-    onLoadComplete() {
-        this._dataStorage.loaded = this._dataStorage.total;
-        this.setReadyState(this.DONE);
-        this.dispatchProgressEvent("load");
+    constructor(_sanitizer) {
+        this._sanitizer = _sanitizer;
     }
     /**
-     * @private
+     * Transforms the HTML input string value into a `SafeHtml` instance and returns the result
+     * of the transformation.
+     *
+     * @param value The HTML input value to transform into a `SafeHtml` instance.
+     * @returns A `SafeHtml` instance based on the specified input value.
      */
-    onError(error) {
-        this._status = error.status;
-        this._statusText = error.statusText;
-        this.setReadyState(this.DONE);
-        this.dispatchProgressEvent("error");
+    transform(value) {
+        return this._sanitizer.bypassSecurityTrustHtml(value);
     }
-    /**
-     * @private
-     */
-    eventDispatch(type) {
-        const event = new Event(type);
-        Object.defineProperty(event, 'target', EVT_PROPS_CONFIG);
-        Object.defineProperty(event, 'currentTarget', EVT_PROPS_CONFIG);
-        this.dispatchEvent(event);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeHtml',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+/**
+ * @private
+ */
+const SLASH = "/";
+class UrlUtil {
+    static getResourceName(log) {
+        return UrlUtil.getResourceNameFromPath(UrlUtil.getResourcePath(log));
     }
-    /**
-     * @private
-     */
-    dispatchProgressEvent(type = "progress") {
-        const d = this._dataStorage;
-        const event = new ProgressEventMock(type);
-        event.loaded = d.loaded;
-        event.total = d.total;
-        this.dispatchEvent(event);
+    static getResourceNameFromPath(pathname) {
+        const pos = pathname.length - 1;
+        if (pathname.lastIndexOf(SLASH) === pos)
+            pathname = pathname.substring(0, pos);
+        return pathname.substring(pathname.lastIndexOf(SLASH) + 1);
     }
-    /**
-     * @private
-     */
-    setReadyState(state) {
-        this._readyState = state;
-        const event = this.onreadystatechange;
-        if (event)
-            event.call(this, READY_STATE_CHANGE_EVENT);
+    static getResourcePath(log) {
+        return log.metadata.requestMetadata.url.pathname;
     }
-    /**
-     * @private
-     */
-    loadData(httpResponseMock) {
-        const responseBody = httpResponseMock.body;
-        return (responseBody instanceof Observable) ? responseBody : of(responseBody);
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+const IMG_TYPE = 'image/';
+const SVG_TYPE = 'svg/';
+class AtxResponsePreviewRendererComponent {
+    set data(value) {
+        const body = value.body;
+        this.revokeObjectURL();
+        this.response = value;
+        this.json = this.text = this.imgUrl = this.trustUrl = null;
+        if (body) {
+            const bodyType = DataUtil.getBodyType(body);
+            if (bodyType === ConsoleBodyType.TEXT)
+                this.text = body;
+            else if (bodyType === ConsoleBodyType.JSON)
+                this.json = body;
+            else if (bodyType === ConsoleBodyType.BLOB) {
+                if (body.type.startsWith(IMG_TYPE) ||
+                    body.type.startsWith(SVG_TYPE)) {
+                    this.resourceName = UrlUtil.getResourceNameFromPath(value.url);
+                    const url = URL.createObjectURL(body);
+                    this.imgUrl = url;
+                    this.trustUrl = this.sanitizer.bypassSecurityTrustUrl(url);
+                }
+            }
+        }
+        this._cdr.detectChanges();
     }
-    /**
-     * @private
-     */
-    setDataStorage(responseMock, data = null) {
-        this._dataStorage = DataStorageBuilder.buildDataStorage(responseMock, data);
+    constructor(_cdr, sanitizer) {
+        this._cdr = _cdr;
+        this.sanitizer = sanitizer;
+        this.json = null;
+        this.text = null;
+        this.response = null;
+        this.imgUrl = null;
+        this.trustUrl = null;
     }
-    /**
-     * @private
-     */
-    buildHttpRequest(body) {
-        let params = new HttpParams();
-        const it = this._routeConfig.searchParams.entries();
-        for (const pair of it)
-            params = params.set(pair[0], pair[1]);
-        return new HttpRequest(this._method, this._url, body, { params: params });
+    ngOnDestroy() {
+        this.revokeObjectURL();
+        this.json = this.text = this.imgUrl = this.trustUrl = null;
+    }
+    revokeObjectURL() {
+        if (this.imgUrl)
+            URL.revokeObjectURL(this.imgUrl);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxResponsePreviewRendererComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AtxResponsePreviewRendererComponent, isStandalone: true, selector: "atx-response-preview-renderer", inputs: { data: "data" }, ngImport: i0, template: "\r\n<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (response) {\r\n    @if (text) {\r\n        <section class=\"content\" [innerHTML]=\"text | safeHtml \"></section>\r\n    } @else if (json) {\r\n        <section class=\"content\">\r\n            <atx-json-viewer [data]=\"json\"/>\r\n        </section>\r\n    } @else if (imgUrl) {\r\n        <section class=\"content img-preview\">\r\n                <div>\r\n                    <img [src]=\"imgUrl\" (load)=\"revokeObjectURL()\" [alt]=\"resourceName\" [title]=\"resourceName\">\r\n                </div>\r\n        </section>\r\n    } @else {\r\n        <section class=\"content center-content\">\r\n            <strong>Preview not available</strong>\r\n        </section>\r\n    }\r\n}\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}::ng-deep .xdebug-error{font-size:12px!important}.img-preview{text-align:center}.img-preview div{box-shadow:0 4px 10px #000000bf;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX////09PQtDxrOAAAAE0lEQVQI12P4f4CBKMxg/4EYDAAFkR1NiYvv7QAAAABJRU5ErkJggg==);background-image:linear-gradient(45deg,#F0F0F0 25%,transparent 25%),linear-gradient(-45deg,#F0F0F0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#F0F0F0 75%),linear-gradient(-45deg,transparent 75%,#F0F0F0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:inline-block}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"], dependencies: [{ kind: "component", type: AtxJsonViewerComponent, selector: "atx-json-viewer", inputs: ["data"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxResponsePreviewRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-response-preview-renderer', standalone: true, imports: [
+                        AtxJsonViewerComponent,
+                        SafeHtmlPipe
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (response) {\r\n    @if (text) {\r\n        <section class=\"content\" [innerHTML]=\"text | safeHtml \"></section>\r\n    } @else if (json) {\r\n        <section class=\"content\">\r\n            <atx-json-viewer [data]=\"json\"/>\r\n        </section>\r\n    } @else if (imgUrl) {\r\n        <section class=\"content img-preview\">\r\n                <div>\r\n                    <img [src]=\"imgUrl\" (load)=\"revokeObjectURL()\" [alt]=\"resourceName\" [title]=\"resourceName\">\r\n                </div>\r\n        </section>\r\n    } @else {\r\n        <section class=\"content center-content\">\r\n            <strong>Preview not available</strong>\r\n        </section>\r\n    }\r\n}\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}::ng-deep .xdebug-error{font-size:12px!important}.img-preview{text-align:center}.img-preview div{box-shadow:0 4px 10px #000000bf;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX////09PQtDxrOAAAAE0lEQVQI12P4f4CBKMxg/4EYDAAFkR1NiYvv7QAAAABJRU5ErkJggg==);background-image:linear-gradient(45deg,#F0F0F0 25%,transparent 25%),linear-gradient(-45deg,#F0F0F0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#F0F0F0 75%),linear-gradient(-45deg,transparent 75%,#F0F0F0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:inline-block}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.DomSanitizer }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class AtxResponseBodyRendererComponent {
+    set data(value) {
+        this.body = value;
+        this.text = this.blob = this.arrayBuffer = null;
+        if (value) {
+            const bodyType = DataUtil.getBodyType(value);
+            if (bodyType === ConsoleBodyType.TEXT)
+                this.text = value;
+            else if (bodyType === ConsoleBodyType.JSON)
+                this.text = JSON.stringify(value);
+            else if (bodyType === ConsoleBodyType.BLOB)
+                this.blob = value;
+            else if (bodyType === ConsoleBodyType.ARRAY_BUFFER)
+                this.arrayBuffer = value;
+        }
+        this._cdr.detectChanges();
+    }
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this.text = null;
+        this.body = null;
+        this.blob = null;
+        this.arrayBuffer = null;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxResponseBodyRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AtxResponseBodyRendererComponent, isStandalone: true, selector: "atx-response-body-renderer", inputs: { data: "data" }, ngImport: i0, template: "\r\n<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (body) {\r\n    <section class=\"content\">\r\n        @if (text) {\r\n            {{ text }}\r\n        } @else if (blob) {\r\n            <dl>\r\n                <dt>Binary data:</dt>\r\n                <dd>Blob</dd>\r\n            </dl>\r\n            <dl>\r\n                <dt>ize:</dt>\r\n                <dd>{{ blob.size }}</dd>\r\n            </dl>\r\n            <dl>\r\n                <dt>type:</dt>\r\n                <dd>{{ blob.type }}</dd>\r\n            </dl>\r\n        } @else if (arrayBuffer) {\r\n            <dl>\r\n                <dt>Binary data:</dt>\r\n                <dd>Array Buffer</dd>\r\n            </dl>\r\n            <dl>\r\n                <dt>byte length:</dt>\r\n                <dd>{{ arrayBuffer.byteLength }}</dd>\r\n            </dl>\r\n        } @else {\r\n            <div class=\"center-content\">\r\n                <strong>This request has no data available</strong>\r\n            </div>\r\n        }\r\n    </section>\r\n}\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}dl,dd,dt{margin:0;padding:0}dl{display:flex;gap:12px}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxResponseBodyRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-response-body-renderer', standalone: true, imports: [
+                        AtxJsonViewerComponent,
+                        SafeHtmlPipe
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (body) {\r\n    <section class=\"content\">\r\n        @if (text) {\r\n            {{ text }}\r\n        } @else if (blob) {\r\n            <dl>\r\n                <dt>Binary data:</dt>\r\n                <dd>Blob</dd>\r\n            </dl>\r\n            <dl>\r\n                <dt>ize:</dt>\r\n                <dd>{{ blob.size }}</dd>\r\n            </dl>\r\n            <dl>\r\n                <dt>type:</dt>\r\n                <dd>{{ blob.type }}</dd>\r\n            </dl>\r\n        } @else if (arrayBuffer) {\r\n            <dl>\r\n                <dt>Binary data:</dt>\r\n                <dd>Array Buffer</dd>\r\n            </dl>\r\n            <dl>\r\n                <dt>byte length:</dt>\r\n                <dd>{{ arrayBuffer.byteLength }}</dd>\r\n            </dl>\r\n        } @else {\r\n            <div class=\"center-content\">\r\n                <strong>This request has no data available</strong>\r\n            </div>\r\n        }\r\n    </section>\r\n}\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}dl,dd,dt{margin:0;padding:0}dl{display:flex;gap:12px}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class AtxRequestDetailsComponent {
+    set log(value) {
+        this.currLog = value;
+        if (value) {
+            const metadata = value.metadata;
+            const request = metadata.request;
+            this.request = request;
+            this.response = metadata.response;
+            this.requestMetadata = metadata.requestMetadata;
+            this.checkPayload(request);
+            this._cdr.detectChanges();
+            return;
+        }
+        this.hasPayload = false;
+        this.request = null;
+        this.response = null;
+        this.requestMetadata = null;
+        this._cdr.detectChanges();
+    }
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this.close = new EventEmitter(true);
+        this.currLog = null;
+        this.hasPayload = false;
+        this.currSection = 0;
+    }
+    changeSection(idx) {
+        this.currSection = idx;
+    }
+    checkPayload(request) {
+        const hasBody = (request.body !== null && request !== undefined);
+        this.hasPayload = (request.params.keys().length > 0 || hasBody);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxRequestDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AtxRequestDetailsComponent, isStandalone: true, selector: "atx-monitoring-console-details", inputs: { log: "log" }, outputs: { close: "close" }, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (currLog) {\r\n    <header>\r\n        <menu>\r\n            <li role=\"button\" (click)=\"changeSection(0)\"><span [class.selected]=\"currSection === 0\">Headers</span></li>\r\n            @if (hasPayload) {\r\n                <li role=\"button\" (click)=\"changeSection(1)\"><span [class.selected]=\"currSection === 1\">Payload</span></li>\r\n            }\r\n            <li role=\"button\" (click)=\"changeSection(2)\"><span [class.selected]=\"currSection === 2\">Preview</span></li>\r\n            <li role=\"button\" (click)=\"changeSection(3)\"><span [class.selected]=\"currSection === 3\">Response</span></li>\r\n            <li role=\"button\" (click)=\"changeSection(4)\"><span [class.selected]=\"currSection === 4\">Timing</span></li>\r\n            <div role=\"button\" (click)=\"close.emit()\" title=\"Close\" class=\"header-btn\">\r\n                <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n                    <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708\"/>\r\n                </svg>\r\n            </div>\r\n        </menu>\r\n    </header>\r\n    <main>\r\n        @if (currSection === 0) {\r\n            <details open>\r\n                <summary>General</summary>\r\n                <section>\r\n                    <dl>\r\n                        <dt>Request URL:</dt>\r\n                        <dd>{{ request.url }}</dd>\r\n                    </dl>\r\n                    <dl>\r\n                        <dt>Request Method:</dt>\r\n                        <dd>{{ request.method }}</dd>\r\n                    </dl>\r\n                    <dl>\r\n                        <dt>Status Code:</dt>\r\n                        <dd>\r\n                            @if (response) {\r\n                                <svg [ngStyle]=\"{ fill: response.status < 400 ? 'green' : 'red' }\" \r\n                                    width=\"13\" height=\"13\" viewBox=\"0 0 16 16\">\r\n                                    <circle cx=\"8\" cy=\"8\" r=\"8\"/>\r\n                                </svg>\r\n                                {{ response.status }} {{ response.statusText }}\r\n                            } @else {\r\n                                <svg fill=\"orange\" width=\"13\" height=\"13\" viewBox=\"0 0 16 16\">\r\n                                    <circle cx=\"8\" cy=\"8\" r=\"8\"/>\r\n                                </svg>\r\n                                prefetch\r\n                            }\r\n                        </dd>\r\n                    </dl>\r\n                </section>\r\n            </details>\r\n            <details>\r\n                <summary>Response Headers</summary>\r\n                <section>\r\n                    @if (response) {\r\n                        @for( item of response.headers.keys(); track item) {\r\n                            <dl>\r\n                                <dt>{{ item }}</dt>\r\n                                <dd>{{ response.headers.get(item) }}</dd>\r\n                            </dl>\r\n                            \r\n                        }\r\n                    }\r\n                </section>\r\n            </details>\r\n            <details>\r\n                <summary>Request Headers</summary>\r\n                <section>\r\n                    @for( item of request.headers.keys(); track item) {\r\n                        <dl>\r\n                            <dt>{{ item }}</dt>\r\n                            <dd>{{ request.headers.get(item) }}</dd>\r\n                        </dl>\r\n                    }\r\n                </section>\r\n            </details>\r\n        } @else if (currSection === 1) {\r\n            <atx-payload-renderer [log]=\"currLog\"/>\r\n        } @else if (currSection === 2 && response) {\r\n            <atx-response-preview-renderer [data]=\"response\"/>\r\n        } @else if (currSection === 3 && response) {\r\n            <section class=\"raw-response\">\r\n                <atx-response-body-renderer [data]=\"response.body\"/>\r\n            </section>\r\n        } @else if (currSection === 4 && response) {\r\n            <atx-timing-renderer [data]=\"currLog\"/>\r\n        }\r\n    </main>\r\n}\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}:host{position:relative;width:100%;height:100%}header{padding:0;margin:0 0 6px;-webkit-user-select:none;user-select:none;position:absolute;width:100%}header menu{background-color:var(--background-color);border:1px solid var(--border-color)}header menu li{padding:0 0 0 6px}header menu .selected{border-bottom:2px solid var(--border-color)}main{position:absolute;width:100%;top:36px;bottom:0;overflow-y:auto}details summary{padding:2px 6px;background-color:var(--background-color);border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;margin-bottom:6px}details section{padding:4px 6px}details section dl{display:flex;gap:10px}details section dl,details section dt,details section dd{padding:0;margin:0}details section dt{min-width:200px}.status-indicator{padding:0;margin:0}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AtxPayloadRendererComponent, selector: "atx-payload-renderer", inputs: ["log"] }, { kind: "component", type: AtxTimingRendererComponent, selector: "atx-timing-renderer", inputs: ["data"] }, { kind: "component", type: AtxResponsePreviewRendererComponent, selector: "atx-response-preview-renderer", inputs: ["data"] }, { kind: "component", type: AtxResponseBodyRendererComponent, selector: "atx-response-body-renderer", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxRequestDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-monitoring-console-details', standalone: true, imports: [
+                        NgStyle,
+                        AtxJsonViewerComponent,
+                        AtxPayloadRendererComponent,
+                        AtxTimingRendererComponent,
+                        AtxResponsePreviewRendererComponent,
+                        AtxResponseBodyRendererComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (currLog) {\r\n    <header>\r\n        <menu>\r\n            <li role=\"button\" (click)=\"changeSection(0)\"><span [class.selected]=\"currSection === 0\">Headers</span></li>\r\n            @if (hasPayload) {\r\n                <li role=\"button\" (click)=\"changeSection(1)\"><span [class.selected]=\"currSection === 1\">Payload</span></li>\r\n            }\r\n            <li role=\"button\" (click)=\"changeSection(2)\"><span [class.selected]=\"currSection === 2\">Preview</span></li>\r\n            <li role=\"button\" (click)=\"changeSection(3)\"><span [class.selected]=\"currSection === 3\">Response</span></li>\r\n            <li role=\"button\" (click)=\"changeSection(4)\"><span [class.selected]=\"currSection === 4\">Timing</span></li>\r\n            <div role=\"button\" (click)=\"close.emit()\" title=\"Close\" class=\"header-btn\">\r\n                <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n                    <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708\"/>\r\n                </svg>\r\n            </div>\r\n        </menu>\r\n    </header>\r\n    <main>\r\n        @if (currSection === 0) {\r\n            <details open>\r\n                <summary>General</summary>\r\n                <section>\r\n                    <dl>\r\n                        <dt>Request URL:</dt>\r\n                        <dd>{{ request.url }}</dd>\r\n                    </dl>\r\n                    <dl>\r\n                        <dt>Request Method:</dt>\r\n                        <dd>{{ request.method }}</dd>\r\n                    </dl>\r\n                    <dl>\r\n                        <dt>Status Code:</dt>\r\n                        <dd>\r\n                            @if (response) {\r\n                                <svg [ngStyle]=\"{ fill: response.status < 400 ? 'green' : 'red' }\" \r\n                                    width=\"13\" height=\"13\" viewBox=\"0 0 16 16\">\r\n                                    <circle cx=\"8\" cy=\"8\" r=\"8\"/>\r\n                                </svg>\r\n                                {{ response.status }} {{ response.statusText }}\r\n                            } @else {\r\n                                <svg fill=\"orange\" width=\"13\" height=\"13\" viewBox=\"0 0 16 16\">\r\n                                    <circle cx=\"8\" cy=\"8\" r=\"8\"/>\r\n                                </svg>\r\n                                prefetch\r\n                            }\r\n                        </dd>\r\n                    </dl>\r\n                </section>\r\n            </details>\r\n            <details>\r\n                <summary>Response Headers</summary>\r\n                <section>\r\n                    @if (response) {\r\n                        @for( item of response.headers.keys(); track item) {\r\n                            <dl>\r\n                                <dt>{{ item }}</dt>\r\n                                <dd>{{ response.headers.get(item) }}</dd>\r\n                            </dl>\r\n                            \r\n                        }\r\n                    }\r\n                </section>\r\n            </details>\r\n            <details>\r\n                <summary>Request Headers</summary>\r\n                <section>\r\n                    @for( item of request.headers.keys(); track item) {\r\n                        <dl>\r\n                            <dt>{{ item }}</dt>\r\n                            <dd>{{ request.headers.get(item) }}</dd>\r\n                        </dl>\r\n                    }\r\n                </section>\r\n            </details>\r\n        } @else if (currSection === 1) {\r\n            <atx-payload-renderer [log]=\"currLog\"/>\r\n        } @else if (currSection === 2 && response) {\r\n            <atx-response-preview-renderer [data]=\"response\"/>\r\n        } @else if (currSection === 3 && response) {\r\n            <section class=\"raw-response\">\r\n                <atx-response-body-renderer [data]=\"response.body\"/>\r\n            </section>\r\n        } @else if (currSection === 4 && response) {\r\n            <atx-timing-renderer [data]=\"currLog\"/>\r\n        }\r\n    </main>\r\n}\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}:host{position:relative;width:100%;height:100%}header{padding:0;margin:0 0 6px;-webkit-user-select:none;user-select:none;position:absolute;width:100%}header menu{background-color:var(--background-color);border:1px solid var(--border-color)}header menu li{padding:0 0 0 6px}header menu .selected{border-bottom:2px solid var(--border-color)}main{position:absolute;width:100%;top:36px;bottom:0;overflow-y:auto}details summary{padding:2px 6px;background-color:var(--background-color);border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;margin-bottom:6px}details section{padding:4px 6px}details section dl{display:flex;gap:10px}details section dl,details section dt,details section dd{padding:0;margin:0}details section dt{min-width:200px}.status-indicator{padding:0;margin:0}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { close: [{
+                type: Output
+            }], log: [{
+                type: Input
+            }] } });
 
 /**
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * Use of this source code is governed by an MIT-style license that can be ound in
- * fthe LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
 /**
  * @private
- * An error used as reference for unit testing.
- * Angular framework calls `XMLHttpRequest` method only after the `open()` method invokation.
  */
-const XHR_ERROR = (method) => {
-    throw new Error(`Attempt to call ${method}() method before calling open().`);
-};
+const B = " B";
 /**
  * @private
- * A XHR proxy that is used by the Mocking Framework to apply HTTP call strategies.
  */
-class XhrProxyImpl extends XhrBase {
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    get response() {
-        return this.XHR ? this.XHR.response : undefined;
-    }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    get status() {
-        return this.XHR ? this.XHR.status : 0;
+const KB = " KB";
+/**
+ * @private
+ */
+const MB = " MB";
+class SizeUtil {
+    static getSize(obj) {
+        if (!obj)
+            return 0;
+        return new TextEncoder().encode(JSON.stringify(obj)).length;
+    }
+    static sizeToString(size) {
+        if (size < 1024)
+            return size + B;
+        size = size / 1024;
+        if (size < 1024)
+            return size + KB;
+        return (size / 1024).toFixed(2) + MB;
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    get statusText() {
-        return this.XHR ? this.XHR.statusText : EMPTY_STRING;
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class AtxConsoleFooterComponent {
+    constructor() {
+        this.size = "0 B";
+        this.numLogs = 0;
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    get readyState() {
-        return this.XHR ? this.XHR.readyState : this.UNSENT;
+    set cumulativeSize(value) {
+        this.size = SizeUtil.sizeToString(value);
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    get responseURL() {
-        return this.XHR ? this.XHR.responseURL : EMPTY_STRING;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxConsoleFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AtxConsoleFooterComponent, isStandalone: true, selector: "atx-console-footer", inputs: { cumulativeSize: "cumulativeSize", numLogs: "numLogs" }, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n<footer>\r\n    <div>\r\n        {{ numLogs }} requests\r\n    </div>\r\n    <div class=\"menu-separator\"></div>\r\n    <div>\r\n        {{ size }} resources\r\n    </div>\r\n</footer>\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}footer{background-color:var(--light-gray);border-top:1px solid var(--border-color);margin-top:6px;padding:6px 6px 6px 10px;display:flex;align-items:center;gap:6px}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxConsoleFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-console-footer', standalone: true, imports: [], template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n<footer>\r\n    <div>\r\n        {{ numLogs }} requests\r\n    </div>\r\n    <div class=\"menu-separator\"></div>\r\n    <div>\r\n        {{ size }} resources\r\n    </div>\r\n</footer>\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}footer{background-color:var(--light-gray);border-top:1px solid var(--border-color);margin-top:6px;padding:6px 6px 6px 10px;display:flex;align-items:center;gap:6px}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], propDecorators: { cumulativeSize: [{
+                type: Input
+            }], numLogs: [{
+                type: Input
+            }] } });
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+var AtxConsoleActionType;
+(function (AtxConsoleActionType) {
+    AtxConsoleActionType[AtxConsoleActionType["CLEAR_LOGS"] = 0] = "CLEAR_LOGS";
+    AtxConsoleActionType[AtxConsoleActionType["EXPORT_LOGS"] = 1] = "EXPORT_LOGS";
+    AtxConsoleActionType[AtxConsoleActionType["IMPORT_LOGS"] = 2] = "IMPORT_LOGS";
+})(AtxConsoleActionType || (AtxConsoleActionType = {}));
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class AtxConsoleMenuComponent {
+    constructor(logger) {
+        this.logger = logger;
+        this.actionList = AtxConsoleActionType;
+        this.action = new EventEmitter(true);
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    get responseText() {
-        return this.XHR ? this.XHR.responseText : EMPTY_STRING;
+    sendAction(type) {
+        this.action.emit({ type: type });
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    get responseType() {
-        return this.XHR ? this.XHR.responseType : EMPTY_STRING;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxConsoleMenuComponent, deps: [{ token: HttpMockLoggingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AtxConsoleMenuComponent, isStandalone: true, selector: "atx-console-menu", outputs: { action: "action" }, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n \r\n<menu>\r\n    <li role=\"button\" title=\"Clear network log\" (click)=\"sendAction(actionList.CLEAR_LOGS)\">\r\n        <svg width=\"18\" height=\"18\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16\"/>\r\n            <path d=\"M11.354 4.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708\"/>\r\n        </svg>\r\n    </li>\r\n    <div class=\"menu-separator\"></div>\r\n    <li title=\"Filter\" class=\"disabled\">\r\n        <svg width=\"19\" height=\"19\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z\"/>\r\n        </svg>\r\n    </li>\r\n    <li title=\"Search\" class=\"disabled\">\r\n        <svg width=\"18\" height=\"18\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0\"/>\r\n        </svg>\r\n    </li>\r\n    <div class=\"menu-separator\"></div>\r\n    <li role=\"button\" title=\"Import\" (click)=\"sendAction(actionList.IMPORT_LOGS)\">\r\n        <svg width=\"19\" height=\"19\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5\"/>\r\n            <path d=\"M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z\"/>\r\n        </svg>\r\n    </li>\r\n    <li role=\"button\" title=\"Export\" (click)=\"sendAction(actionList.EXPORT_LOGS)\">\r\n        <svg width=\"18\" height=\"18\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5\"/>\r\n            <path d=\"M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z\"/>\r\n        </svg>\r\n    </li>\r\n</menu>\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}menu{padding-left:6px;background-color:var(--light-gray);position:absolute;width:100%;border-bottom:1px solid var(--border-color)}menu li{padding:6px}menu li:hover:not(.disabled){background-color:var(--dark-gray)}menu .disabled{opacity:.25}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxConsoleMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-console-menu', standalone: true, imports: [], template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n \r\n<menu>\r\n    <li role=\"button\" title=\"Clear network log\" (click)=\"sendAction(actionList.CLEAR_LOGS)\">\r\n        <svg width=\"18\" height=\"18\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16\"/>\r\n            <path d=\"M11.354 4.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708\"/>\r\n        </svg>\r\n    </li>\r\n    <div class=\"menu-separator\"></div>\r\n    <li title=\"Filter\" class=\"disabled\">\r\n        <svg width=\"19\" height=\"19\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z\"/>\r\n        </svg>\r\n    </li>\r\n    <li title=\"Search\" class=\"disabled\">\r\n        <svg width=\"18\" height=\"18\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0\"/>\r\n        </svg>\r\n    </li>\r\n    <div class=\"menu-separator\"></div>\r\n    <li role=\"button\" title=\"Import\" (click)=\"sendAction(actionList.IMPORT_LOGS)\">\r\n        <svg width=\"19\" height=\"19\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5\"/>\r\n            <path d=\"M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z\"/>\r\n        </svg>\r\n    </li>\r\n    <li role=\"button\" title=\"Export\" (click)=\"sendAction(actionList.EXPORT_LOGS)\">\r\n        <svg width=\"18\" height=\"18\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path d=\"M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5\"/>\r\n            <path d=\"M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z\"/>\r\n        </svg>\r\n    </li>\r\n</menu>\r\n", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}menu{padding-left:6px;background-color:var(--light-gray);position:absolute;width:100%;border-bottom:1px solid var(--border-color)}menu li{padding:6px}menu li:hover:not(.disabled){background-color:var(--dark-gray)}menu .disabled{opacity:.25}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], ctorParameters: () => [{ type: HttpMockLoggingService }], propDecorators: { action: [{
+                type: Output
+            }] } });
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class LogMessageUtil {
+    static getMessageFromLevel(level) {
+        if (level === LogLevel.INFO)
+            return HttpMockLoggingConstant.RESPONSE_MESSAGE;
+        if (level === LogLevel.ERROR)
+            return HttpMockLoggingConstant.ERROR_MESSAGE;
+        return HttpMockLoggingConstant.CONFIG_MESSAGE;
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    set responseType(value) {
-        if (!this.XHR)
-            XHR_ERROR("responseType");
-        this.XHR.responseType = value;
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class RequestMetadataConverter {
+    static requestMetadataToDto(metadata) {
+        return {
+            duration: metadata.duration,
+            id: metadata.id.toString(),
+            stalled: metadata.stalled,
+            start: metadata.start,
+            url: metadata.url.toString()
+        };
     }
-    get upload() {
-        return this.XHR.upload;
+    static dtoToRequestMetadata(metadata) {
+        return {
+            duration: metadata.duration,
+            id: Uuid.fromString(metadata.id),
+            stalled: metadata.stalled,
+            start: metadata.start,
+            url: new URL(metadata.url)
+        };
     }
-    open(method, url, async, username, password) {
-        const m = method.toString().toLowerCase();
-        const parsedUrl = URL.canParse(url) ? new URL(url) : new URL(this._httpMockService.getAppOrigin() + url);
-        const config = this._httpMockService.getRouteConfig(parsedUrl, m);
-        if (this.XHR && this.XHR instanceof DelegateXhr)
-            this.XHR.destroy();
-        this.XHR = config ? new DelegateXhr(config) : new XMLHttpRequest();
-        this.XHR.withCredentials = this.withCredentials;
-        this.XHR.open(m.toString(), parsedUrl.toString());
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class HttpHeadersConverter {
+    static headersToDto(headers) {
+        const dtoList = [];
+        const keys = headers.keys();
+        let cursor = keys.length - 1;
+        for (; cursor >= 0; cursor--) {
+            const key = keys[cursor];
+            dtoList.push({
+                name: key,
+                value: headers.getAll(key)
+            });
+        }
+        return dtoList;
+    }
+    static dtoToHeaders(headersDto) {
+        let headers = new HttpHeaders();
+        let cursor = headersDto.length - 1;
+        for (; cursor >= 0; cursor--) {
+            const entry = headersDto[cursor];
+            const value = entry.value;
+            if (value)
+                headers = headers.append(entry.name, value);
+        }
+        return headers;
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    abort() {
-        if (this.XHR)
-            return this.XHR.abort();
-        XHR_ERROR("abort");
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class BodySerializer {
+    static serialize(data, type) {
+        if (type === ConsoleBodyType.TEXT)
+            return data;
+        if (type === ConsoleBodyType.JSON)
+            return JSON.stringify(data);
+        if (type === ConsoleBodyType.BLOB)
+            return null;
+        if (type === ConsoleBodyType.FORM_DATA)
+            return JSON.stringify(Array.from(data));
+        if (type === ConsoleBodyType.ARRAY_BUFFER)
+            null;
+        return null;
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    getAllResponseHeaders() {
-        return this.XHR ? this.XHR.getAllResponseHeaders() : EMPTY_STRING;
+    static unserialize(data, type) {
+        if (type === ConsoleBodyType.TEXT)
+            return data;
+        if (type === ConsoleBodyType.JSON)
+            return JSON.parse(data);
+        if (type === ConsoleBodyType.BLOB)
+            return null;
+        if (type === ConsoleBodyType.FORM_DATA)
+            return BodySerializer.stringToFormData(data);
+        if (type === ConsoleBodyType.ARRAY_BUFFER)
+            null;
+        return null;
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    addEventListener(type, listener, options) {
-        if (this.XHR)
-            return this.XHR.addEventListener(type, listener, options);
-        XHR_ERROR("addEventListener");
+    static stringToFormData(data) {
+        const result = new FormData();
+        const arr = JSON.parse(data);
+        let cursor = arr.length - 1;
+        for (; cursor >= 0; cursor--) {
+            const entry = arr[cursor];
+            result.append(entry[0], entry[1]);
+        }
+        return result;
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    removeEventListener(type, listener, options) {
-        if (this.XHR)
-            return this.XHR.removeEventListener(type, listener, options);
-        XHR_ERROR("removeEventListener");
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class BodyConverter {
+    static bodyToDto(body) {
+        const bodyType = DataUtil.getBodyType(body);
+        return {
+            type: bodyType,
+            data: BodySerializer.serialize(body, bodyType)
+        };
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    send(body) {
-        if (this.XHR)
-            return this.XHR.send(body);
-        XHR_ERROR("send");
+    static dtoToBody(dto) {
+        return BodySerializer.unserialize(dto.data, dto.type);
     }
-    /**
-     * @private
-     *
-     * XMLHTTPRequest API
-     */
-    setRequestHeader(name, value) {
-        if (this.XHR)
-            return this.XHR.setRequestHeader(name, value);
-        XHR_ERROR("setRequestHeader");
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+const ATX_IS_IMPORTED_LOG = new HttpContextToken(() => false);
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class HttpRequestConverter {
+    static buildRequestDto(request) {
+        return {
+            body: BodyConverter.bodyToDto(request.body),
+            reportProgress: request.reportProgress,
+            withCredentials: request.withCredentials,
+            responseType: request.responseType,
+            method: request.method,
+            url: request.url,
+            params: request.params.toString(),
+            headers: HttpHeadersConverter.headersToDto(request.headers)
+        };
     }
-    /**
-     * @private
-     *
-     * For Unit Testing only.
-     */
-    instanceOf(classRef) {
-        return this.XHR instanceof classRef;
+    static buildHttpRequest(dto) {
+        const ctx = new HttpContext();
+        const paramsOpt = {
+            fromString: dto.params
+        };
+        const init = {
+            headers: HttpHeadersConverter.dtoToHeaders(dto.headers),
+            reportProgress: dto.reportProgress,
+            responseType: dto.responseType,
+            withCredentials: dto.withCredentials,
+            params: new HttpParams(paramsOpt),
+            context: ctx
+        };
+        const body = BodyConverter.dtoToBody(dto.body);
+        const request = new HttpRequest(dto.method, dto.url, body, init);
+        ctx.set(ATX_IS_IMPORTED_LOG, true);
+        return request;
     }
-    /**
-     * @private
-     */
-    constructor(_httpMockService) {
-        super();
-        this._httpMockService = _httpMockService;
+}
+
+/**
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
+ */
+class HttpResponseConverter {
+    static buildResponseDto(response) {
+        return {
+            body: BodyConverter.bodyToDto(response.body),
+            headers: HttpHeadersConverter.headersToDto(response.headers),
+            status: response.status,
+            statusText: response.statusText,
+            url: response.url
+        };
+    }
+    static buildHttpResponse(dto) {
+        const init = {
+            body: BodyConverter.dtoToBody(dto.body),
+            headers: HttpHeadersConverter.dtoToHeaders(dto.headers),
+            status: dto.status,
+            statusText: dto.statusText,
+            url: dto.url
+        };
+        return new HttpResponse(init);
     }
 }
 
@@ -4355,23 +6261,48 @@ class XhrProxyImpl extends XhrBase {
  * Use of this source code is governed by an MIT-style license that can be found in
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
+class LogMetadataConverter {
+    static metadataToDto(metadata) {
+        return {
+            request: HttpRequestConverter.buildRequestDto(metadata.request),
+            response: HttpResponseConverter.buildResponseDto(metadata.response),
+            requestMetadata: RequestMetadataConverter.requestMetadataToDto(metadata.requestMetadata)
+        };
+    }
+    static dtoToMetadata(dto) {
+        return {
+            request: HttpRequestConverter.buildHttpRequest(dto.request),
+            response: HttpResponseConverter.buildHttpResponse(dto.response),
+            requestMetadata: RequestMetadataConverter.dtoToRequestMetadata(dto.requestMetadata)
+        };
+    }
+}
+
 /**
- * @private
- * The concrete implementation of the `XhrFactory` interface.
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
-class XhrProxyFactoryImpl extends XhrFactory {
-    /**
-     * @private
-     */
-    constructor(_httpMockService) {
-        super();
-        this._httpMockService = _httpMockService;
+class LogConverter {
+    logToDto(log) {
+        return {
+            level: log.level,
+            timestamp: log.timestamp,
+            metadata: LogMetadataConverter.metadataToDto(log.metadata)
+        };
     }
-    /**
-     * @private
-     */
-    build() {
-        return new XhrProxyImpl(this._httpMockService);
+    dtoToLog(dto) {
+        const level = dto.level;
+        const log = {
+            caller: HttpMockLoggingConstant.CALLER,
+            level: level,
+            timestamp: dto.timestamp,
+            message: LogMessageUtil.getMessageFromLevel(level),
+            metadata: LogMetadataConverter.dtoToMetadata(dto.metadata)
+        };
+        return log;
     }
 }
 
@@ -4382,45 +6313,226 @@ class XhrProxyFactoryImpl extends XhrFactory {
  * Use of this source code is governed by an MIT-style license that can be found in
  * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
+class AtxLogIoService {
+    constructor(_logger) {
+        this._logger = _logger;
+        this._converter = new LogConverter();
+    }
+    exportFile(logs) {
+        const logDtoList = [];
+        let cursor = logs.length - 1;
+        for (; cursor >= 0; cursor--) {
+            const log = logs[cursor];
+            if (log.level !== LogLevel.CONFIG)
+                logDtoList.push(this._converter.logToDto(log));
+        }
+        const exportData = {
+            logs: logDtoList,
+            timestamp: Date.now()
+        };
+        const a = document.createElement("a");
+        const file = new Blob([JSON.stringify(exportData)], { type: 'application/json' });
+        a.href = URL.createObjectURL(file);
+        a.download = "logs.hmfl";
+        a.click();
+    }
+    importFile() {
+        const input = document.createElement("input");
+        const converter = this._converter;
+        const logger = this._logger;
+        input.setAttribute("type", "file");
+        input.setAttribute("accept", ".hmfl");
+        input.onchange = (event) => {
+            const fileList = event.target.files;
+            const file = fileList[0];
+            if (file) {
+                var reader = new FileReader();
+                reader.readAsText(file, "UTF-8");
+                reader.onload = function (evt) {
+                    const result = reader.result;
+                    const resultLogData = JSON.parse(result);
+                    const logs = resultLogData.logs;
+                    let cursor = logs.length - 1;
+                    for (; cursor >= 0; cursor--) {
+                        const log = converter.dtoToLog(logs[cursor]);
+                        const metadata = log.metadata;
+                        const level = log.level;
+                        if (level === LogLevel.INFO)
+                            logger.info(metadata);
+                        else if (level === LogLevel.ERROR)
+                            logger.error(metadata);
+                    }
+                    ;
+                };
+                reader.onerror = function (e) {
+                    console.log(e);
+                };
+            }
+        };
+        input.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxLogIoService, deps: [{ token: HttpMockLoggingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxLogIoService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxLogIoService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: HttpMockLoggingService }] });
+
 /**
- * A factory function that creates and returns a new `XhrFactory` object.
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
  *
- * @returns A new `XhrFactory` object.
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
-const httpMockFactory = () => {
-    return new XhrProxyFactoryImpl(inject(HttpMockService));
-};
+class AtxIconRendererComponent {
+    constructor() {
+        this.bodyType = ConsoleBodyType.INVALID;
+        this.hasReponse = false;
+        this.isImported = false;
+    }
+    set data(log) {
+        const response = log.metadata.response;
+        const complete = response !== null && response !== undefined;
+        this.hasReponse = complete;
+        if (complete)
+            this.bodyType = DataUtil.getBodyType(response.body);
+        this.log = log;
+        this.isImported = log.metadata.request?.context.get(ATX_IS_IMPORTED_LOG);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxIconRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AtxIconRendererComponent, isStandalone: true, selector: "atx-icon-renderer", inputs: { data: "data" }, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (log) {\r\n    @if (hasReponse) {\r\n        <svg width=\"24\" height=\"24\" fill=\"currentColor\">\r\n            @if (bodyType == 0) {\r\n                <use href=\"#empty-icon\"/>\r\n            } @else if (bodyType == 1) {\r\n                <use href=\"#json-icon\"/>\r\n            } @else if (bodyType == 2) {\r\n                <use href=\"#text-icon\"/>\r\n            } @else if (bodyType == 3) {\r\n                <use href=\"#blob-icon\"/>\r\n            } @else if (bodyType == 5) {\r\n                <use href=\"#bin-icon\"/>\r\n            }\r\n        </svg>\r\n        @if (isImported) {\r\n            <svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n                <path fill-rule=\"evenodd\" d=\"M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z\"/>\r\n                <path fill-rule=\"evenodd\" d=\"M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z\"/>\r\n            </svg>\r\n        }\r\n    } @else {\r\n        <div class=\"spinner\">\r\n            <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n                <path d=\"M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9\"/>\r\n                <path fill-rule=\"evenodd\" d=\"M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z\"/>\r\n            </svg>\r\n        </div>\r\n    }\r\n}\r\n", styles: [":host{display:flex;padding:0;margin:3px 0 0;min-width:24px}.spinner{margin-left:auto;width:20px;height:20px}.spinner svg{animation:spinnerRotation 1.5s linear infinite}@keyframes spinnerRotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxIconRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-icon-renderer', standalone: true, imports: [], template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n@if (log) {\r\n    @if (hasReponse) {\r\n        <svg width=\"24\" height=\"24\" fill=\"currentColor\">\r\n            @if (bodyType == 0) {\r\n                <use href=\"#empty-icon\"/>\r\n            } @else if (bodyType == 1) {\r\n                <use href=\"#json-icon\"/>\r\n            } @else if (bodyType == 2) {\r\n                <use href=\"#text-icon\"/>\r\n            } @else if (bodyType == 3) {\r\n                <use href=\"#blob-icon\"/>\r\n            } @else if (bodyType == 5) {\r\n                <use href=\"#bin-icon\"/>\r\n            }\r\n        </svg>\r\n        @if (isImported) {\r\n            <svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n                <path fill-rule=\"evenodd\" d=\"M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z\"/>\r\n                <path fill-rule=\"evenodd\" d=\"M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z\"/>\r\n            </svg>\r\n        }\r\n    } @else {\r\n        <div class=\"spinner\">\r\n            <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n                <path d=\"M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9\"/>\r\n                <path fill-rule=\"evenodd\" d=\"M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z\"/>\r\n            </svg>\r\n        </div>\r\n    }\r\n}\r\n", styles: [":host{display:flex;padding:0;margin:3px 0 0;min-width:24px}.spinner{margin-left:auto;width:20px;height:20px}.spinner svg{animation:spinnerRotation 1.5s linear infinite}@keyframes spinnerRotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
 
 /**
- * A basic implementation of a HTML sanitization pipe.
+ * @license
+ * Copyright Pascal ECHEMANN. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be found in
+ * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license
  */
-class SafeHtmlPipe {
-    /**
-     * @private
-     */
-    constructor(_sanitizer) {
-        this._sanitizer = _sanitizer;
+const TPL_DASH = "---";
+const PREFETCH = "prefetch";
+const MS_SUFIX = " ms";
+class AtxMonitoringConsoleComponent extends IdentifiableComponent {
+    constructor(logger, _cdr, _subscribe, _ioSvc) {
+        super();
+        this.logger = logger;
+        this._cdr = _cdr;
+        this._subscribe = _subscribe;
+        this._ioSvc = _ioSvc;
+        this.selectedLog = null;
+        this.cumulativeSize = 0;
+        this.logs = [];
+        const connector = new HttpMonitoringConsoleLogConnector();
+        this.connector = connector;
+        logger.setLogConnector(connector);
+        this._subscribe.register(this, connector.change.subscribe((log) => this.addLog(log)));
     }
-    /**
-     * Transforms the HTML input string value into a `SafeHtml` instance and returns the result
-     * of the transformation.
-     *
-     * @param value The HTML input value to transform into a `SafeHtml` instance.
-     * @returns A `SafeHtml` instance based on the specified input value.
-     */
-    transform(value) {
-        return this._sanitizer.bypassSecurityTrustHtml(value);
+    ngOnDestroy() {
+        this._subscribe.clearAll(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+    logSelect(log) {
+        this.selectedLog = log;
+    }
+    getResourceName(log) {
+        return UrlUtil.getResourceName(log);
+    }
+    getResourcePath(log) {
+        return UrlUtil.getResourcePath(log);
+    }
+    getSize(log) {
+        const response = log.metadata.response;
+        if (response) {
+            const size = SizeUtil.getSize(response.body);
+            return SizeUtil.sizeToString(size);
+        }
+        return TPL_DASH;
+    }
+    getStatus(log) {
+        const response = log.metadata.response;
+        if (response)
+            return response.status;
+        return PREFETCH;
+    }
+    getTime(log) {
+        const response = log.metadata.response;
+        if (response)
+            return log.metadata.requestMetadata.duration + MS_SUFIX;
+        return TPL_DASH;
+    }
+    isError(log) {
+        const response = log.metadata.response;
+        if (response)
+            return response.status >= 400;
+        return false;
+    }
+    isImported(log) {
+        return log.metadata.request?.context.get(ATX_IS_IMPORTED_LOG);
+    }
+    checkFilters(log) {
+        return true;
+    }
+    userAction(action) {
+        switch (action.type) {
+            case AtxConsoleActionType.CLEAR_LOGS:
+                this.clearLogs();
+                break;
+            case AtxConsoleActionType.EXPORT_LOGS:
+                this.exportLogs();
+                break;
+            case AtxConsoleActionType.IMPORT_LOGS:
+                this.importLogs();
+                break;
+        }
+    }
+    addLog(log) {
+        if (log.level !== LogLevel.CONFIG) {
+            const size = SizeUtil.getSize(log.metadata.response.body);
+            const id = log.metadata.requestMetadata.id;
+            this.cumulativeSize += size;
+            const idx = this.logs.findIndex(prefetch => prefetch.metadata.requestMetadata.id === id);
+            idx > -1 ? this.logs.splice(idx, 1, log) : this.logs.push(log);
+            if (this.selectedLog?.metadata.requestMetadata.id === id)
+                this.selectedLog = log;
+        }
+        else
+            this.logs.push(log);
+        this._cdr.detectChanges();
+    }
+    clearLogs() {
+        this.logger.clearLogs();
+        this.logSelect(null);
+        this.cumulativeSize = this.logs.length = 0;
+    }
+    exportLogs() {
+        this._ioSvc.exportFile(this.logs);
+    }
+    importLogs() {
+        this._ioSvc.importFile();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxMonitoringConsoleComponent, deps: [{ token: HttpMockLoggingService }, { token: i0.ChangeDetectorRef }, { token: SubscriptionService }, { token: AtxLogIoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AtxMonitoringConsoleComponent, isStandalone: true, selector: "atx-http-monitoring-console", providers: [
+            AtxLogIoService
+        ], usesInheritance: true, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n<atx-console-menu (action)=\"userAction($event)\"/>\r\n\r\n<div id=\"log-list-vieport\">\r\n    <div class=\"request-list-wrapper\" [class.reduced-request-list]=\"selectedLog\">\r\n        <table id=\"request-list\" >\r\n            <thead>\r\n                <tr>\r\n                    <th class=\"name-header\">\r\n                        Name\r\n                        <div role=\"button\" (click)=\"selectedLog = null\" title=\"Expand\" class=\"header-btn\">\r\n                            <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n                                @if (selectedLog) {\r\n                                    <path fill-rule=\"evenodd\" d=\"M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5\"/>\r\n                                }\r\n                            </svg>\r\n                        </div>\r\n                    </th>\r\n                    @if (!selectedLog) {\r\n                        <th>Status</th>\r\n                        <th>Size</th>\r\n                        <th>Time</th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (log of logs; track log.metadata.requestMetadata.id) {\r\n                    @if (checkFilters(log)) {\r\n                        <tr [class.error-row]=\"isError(log)\" role=\"button\" (click)=\"logSelect(log)\"\r\n                            [class.selected-row]=\"selectedLog === log\">\r\n                            <td [title]=\"getResourcePath(log)\">\r\n                                <atx-icon-renderer [data]=\"log\"/>\r\n                                <div class=\"resource-cell\">\r\n                                    {{ getResourceName(log) }}\r\n                                    <br>\r\n                                    {{ getResourcePath(log) }}\r\n                                </div>\r\n                            </td>\r\n                            @if (!selectedLog) {\r\n                                <td>{{ getStatus(log) }}</td>\r\n                                <td>{{ getSize(log) }}</td>\r\n                                <td>{{ getTime(log) }}</td>\r\n                            }\r\n                        </tr>\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    @if (selectedLog) {\r\n        <div id=\"selected-log-viewport\">\r\n            <atx-monitoring-console-details [log]=\"selectedLog\" (close)=\"logSelect(null)\"/>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<atx-console-footer [cumulativeSize]=\"cumulativeSize\" [numLogs]=\"logs.length\"/>\r\n\r\n<svg id=\"icon-collection\">\r\n    <symbol id=\"json-icon\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z\"/>\r\n        <path d=\"M8.646 6.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 9 8.646 7.354a.5.5 0 0 1 0-.708m-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 9l1.647-1.646a.5.5 0 0 0 0-.708\"/>\r\n    </symbol>\r\n    <symbol id=\"bin-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M5.526 13.09c.976 0 1.524-.79 1.524-2.205 0-1.412-.548-2.203-1.524-2.203-.978 0-1.526.79-1.526 2.203 0 1.415.548 2.206 1.526 2.206zm-.832-2.205c0-1.05.29-1.612.832-1.612.358 0 .607.247.733.721L4.7 11.137a7 7 0 0 1-.006-.252m.832 1.614c-.36 0-.606-.246-.732-.718l1.556-1.145q.005.12.005.249c0 1.052-.29 1.614-.829 1.614m5.329.501v-.595H9.73V8.772h-.69l-1.19.786v.688L8.986 9.5h.05v2.906h-1.18V13h3z\"/>\r\n        <path d=\"M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1\"/>\r\n    </symbol>\r\n    <symbol id=\"text-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M10.943 6H5.057L5 8h.5c.18-1.096.356-1.192 1.694-1.235l.293-.01v5.09c0 .47-.1.582-.898.655v.5H9.41v-.5c-.803-.073-.903-.184-.903-.654V6.755l.298.01c1.338.043 1.514.14 1.694 1.235h.5l-.057-2z\"/>\r\n        <path d=\"M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z\"/>\r\n    </symbol>\r\n    <symbol id=\"empty-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z\"/>\r\n    </symbol>\r\n    <symbol id=\"blob-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M8.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\"/>\r\n        <path d=\"M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8l-2.083-2.083a.5.5 0 0 0-.76.063L8 11 5.835 9.7a.5.5 0 0 0-.611.076L3 12z\"/>\r\n    </symbol>\r\n</svg>", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}:host{position:relative;padding:0;margin:0}#log-list-vieport{position:absolute;width:100%;display:flex;flex-direction:row;gap:6px;padding:6px;top:34px;bottom:34px}#icon-collection{visibility:hidden;width:0;height:0}.request-list-wrapper{height:100%;flex-grow:1;overflow:hidden auto;border:1px solid var(--border-color)}#request-list{-webkit-user-select:none;user-select:none;width:100%}#request-list tbody tr td:first-of-type{display:flex;gap:6px}#request-list svg{margin-top:2px}#request-list .name-header{display:flex;align-items:center}#request-list thead{position:sticky;top:0}#request-list .resource-cell{max-height:40px;overflow:hidden}#selected-log-viewport{height:100%;width:80%}atx-console-footer{position:absolute;width:100%;bottom:0}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"], dependencies: [{ kind: "component", type: AtxRequestDetailsComponent, selector: "atx-monitoring-console-details", inputs: ["log"], outputs: ["close"] }, { kind: "component", type: AtxConsoleFooterComponent, selector: "atx-console-footer", inputs: ["cumulativeSize", "numLogs"] }, { kind: "component", type: AtxConsoleMenuComponent, selector: "atx-console-menu", outputs: ["action"] }, { kind: "component", type: AtxIconRendererComponent, selector: "atx-icon-renderer", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SafeHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'safeHtml',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AtxMonitoringConsoleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-http-monitoring-console', standalone: true, imports: [
+                        AtxRequestDetailsComponent,
+                        AtxConsoleFooterComponent,
+                        AtxConsoleMenuComponent,
+                        AtxIconRendererComponent
+                    ], providers: [
+                        AtxLogIoService
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n\r\n<atx-console-menu (action)=\"userAction($event)\"/>\r\n\r\n<div id=\"log-list-vieport\">\r\n    <div class=\"request-list-wrapper\" [class.reduced-request-list]=\"selectedLog\">\r\n        <table id=\"request-list\" >\r\n            <thead>\r\n                <tr>\r\n                    <th class=\"name-header\">\r\n                        Name\r\n                        <div role=\"button\" (click)=\"selectedLog = null\" title=\"Expand\" class=\"header-btn\">\r\n                            <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n                                @if (selectedLog) {\r\n                                    <path fill-rule=\"evenodd\" d=\"M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5\"/>\r\n                                }\r\n                            </svg>\r\n                        </div>\r\n                    </th>\r\n                    @if (!selectedLog) {\r\n                        <th>Status</th>\r\n                        <th>Size</th>\r\n                        <th>Time</th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (log of logs; track log.metadata.requestMetadata.id) {\r\n                    @if (checkFilters(log)) {\r\n                        <tr [class.error-row]=\"isError(log)\" role=\"button\" (click)=\"logSelect(log)\"\r\n                            [class.selected-row]=\"selectedLog === log\">\r\n                            <td [title]=\"getResourcePath(log)\">\r\n                                <atx-icon-renderer [data]=\"log\"/>\r\n                                <div class=\"resource-cell\">\r\n                                    {{ getResourceName(log) }}\r\n                                    <br>\r\n                                    {{ getResourcePath(log) }}\r\n                                </div>\r\n                            </td>\r\n                            @if (!selectedLog) {\r\n                                <td>{{ getStatus(log) }}</td>\r\n                                <td>{{ getSize(log) }}</td>\r\n                                <td>{{ getTime(log) }}</td>\r\n                            }\r\n                        </tr>\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    @if (selectedLog) {\r\n        <div id=\"selected-log-viewport\">\r\n            <atx-monitoring-console-details [log]=\"selectedLog\" (close)=\"logSelect(null)\"/>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<atx-console-footer [cumulativeSize]=\"cumulativeSize\" [numLogs]=\"logs.length\"/>\r\n\r\n<svg id=\"icon-collection\">\r\n    <symbol id=\"json-icon\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z\"/>\r\n        <path d=\"M8.646 6.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 9 8.646 7.354a.5.5 0 0 1 0-.708m-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 9l1.647-1.646a.5.5 0 0 0 0-.708\"/>\r\n    </symbol>\r\n    <symbol id=\"bin-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M5.526 13.09c.976 0 1.524-.79 1.524-2.205 0-1.412-.548-2.203-1.524-2.203-.978 0-1.526.79-1.526 2.203 0 1.415.548 2.206 1.526 2.206zm-.832-2.205c0-1.05.29-1.612.832-1.612.358 0 .607.247.733.721L4.7 11.137a7 7 0 0 1-.006-.252m.832 1.614c-.36 0-.606-.246-.732-.718l1.556-1.145q.005.12.005.249c0 1.052-.29 1.614-.829 1.614m5.329.501v-.595H9.73V8.772h-.69l-1.19.786v.688L8.986 9.5h.05v2.906h-1.18V13h3z\"/>\r\n        <path d=\"M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1\"/>\r\n    </symbol>\r\n    <symbol id=\"text-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M10.943 6H5.057L5 8h.5c.18-1.096.356-1.192 1.694-1.235l.293-.01v5.09c0 .47-.1.582-.898.655v.5H9.41v-.5c-.803-.073-.903-.184-.903-.654V6.755l.298.01c1.338.043 1.514.14 1.694 1.235h.5l-.057-2z\"/>\r\n        <path d=\"M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z\"/>\r\n    </symbol>\r\n    <symbol id=\"empty-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z\"/>\r\n    </symbol>\r\n    <symbol id=\"blob-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n        <path d=\"M8.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\"/>\r\n        <path d=\"M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8l-2.083-2.083a.5.5 0 0 0-.76.063L8 11 5.835 9.7a.5.5 0 0 0-.611.076L3 12z\"/>\r\n    </symbol>\r\n</svg>", styles: [":host{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;--border-color: lightblue;--background-color: aliceblue;--selected-color: #d9eeff;--selected-error-color: lavenderblush;--light-gray: whitesmoke;--dark-gray: gainsboro;color:#000;background-color:#fff;display:block}menu{padding:0;margin:0;display:flex;align-items:center;gap:6px;list-style:none}table{border-collapse:collapse}th{padding:0 0 0 6px;background-color:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0}th:not(:last-child){border-right:1px solid var(--border-color)}td{padding:2px 6px;vertical-align:top}tr:nth-child(2n):not(.selected-row){background-color:var(--background-color)}.error-row{color:red}.selected-row{background-color:var(--selected-color)}.error-row.selected-row{background-color:var(--selected-error-color)}tr:hover{background-color:var(--light-gray)}.header-btn{padding:4px;margin-left:auto}.header-btn:hover{background-color:var(--selected-color)}.menu-separator{width:0;height:16px;border-right:2px solid var(--dark-gray)}.content{padding:4px 6px}.center-content{display:flex;justify-content:center}:host{position:relative;padding:0;margin:0}#log-list-vieport{position:absolute;width:100%;display:flex;flex-direction:row;gap:6px;padding:6px;top:34px;bottom:34px}#icon-collection{visibility:hidden;width:0;height:0}.request-list-wrapper{height:100%;flex-grow:1;overflow:hidden auto;border:1px solid var(--border-color)}#request-list{-webkit-user-select:none;user-select:none;width:100%}#request-list tbody tr td:first-of-type{display:flex;gap:6px}#request-list svg{margin-top:2px}#request-list .name-header{display:flex;align-items:center}#request-list thead{position:sticky;top:0}#request-list .resource-cell{max-height:40px;overflow:hidden}#selected-log-viewport{height:100%;width:80%}atx-console-footer{position:absolute;width:100%;bottom:0}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], ctorParameters: () => [{ type: HttpMockLoggingService }, { type: i0.ChangeDetectorRef }, { type: SubscriptionService }, { type: AtxLogIoService }] });
 
 /**
  * @license
@@ -4437,5 +6549,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_PRIDGE_REF, AbstractSubscriptionManager, AbstractVersionManager, AnchorLinklDirective, AngularToolboxLogoComponent, AngularToolboxModule, AngularToolboxVersionService, AppBridgeError, AppBrigeService, ArrayList, ArrayListEvent, ArrayListEventType, BIGINT, BOOLEAN, BUTTON_ROLE, ButtonRoleDirective, CSS_PROP, ContentRendererDirective, DARK_MODE_CONFIG, DarkModeService, EMPTY_STRING, FUNCTION, FetchClientBuilder, FetchClientResponseType, HTTP_MOCKING_FRAMEWORK_CONFIG, HTTP_MOCK_SERVICE, HttpHeadersMockBuilder, HttpMock, HttpMockProductionPolicy, HttpMockService, HttpMockServiceError, HttpResponseMockBuilder, IdentifiableComponent, IntegrityError, LINK_ROLE, NUMBER, NavigateToUrlDirective, OBJECT, STORAGE_KEY, STRING, SYMBOL, SafeHtmlPipe, ScrollService, SubscriptionError, SubscriptionService, UNDEFINED, Uuid, VERSION_CONFIG, VersionService, httpHeadersMock, httpMockFactory, httpResponseMock };
+export { APP_PRIDGE_REF, AbstractLogger, AbstractSubscriptionManager, AbstractVersionManager, AnchorLinklDirective, AngularToolboxLogoComponent, AngularToolboxModule, AngularToolboxVersionService, AppBridgeError, AppBrigeService, ArrayList, ArrayListEvent, ArrayListEventType, AtxMonitoringConsoleComponent, BIGINT, BOOLEAN, BUTTON_ROLE, ButtonRoleDirective, CSS_PROP, ConsoleLogConnector, ContentRendererDirective, DARK_MODE_CONFIG, DEFAULT_LOG_CONNECTOR, DarkModeService, DefaultLogConnector, EMPTY_STRING, FUNCTION, FetchClient, FetchClientBuilder, FetchClientResponseType, HTTP_MOCKING_FRAMEWORK_CONFIG, HTTP_MOCK_MAX_DELAY, HTTP_MOCK_SERVICE, HtmlLogConnector, HttpHeadersMockBuilder, HttpMock, HttpMockLoggingService, HttpMockProductionPolicy, HttpMockService, HttpMockServiceError, HttpResponseMockBuilder, IdentifiableComponent, IntegrityError, LINK_ROLE, LOG_CONFIG_STRING, LOG_ERROR_STRING, LOG_INFO_STRING, LOG_WARNING_STRING, LogBuilder, LogImpl, LogLevel, LogUtil, LoggerService, NUMBER, NavigateToUrlDirective, OBJECT, STORAGE_KEY, STRING, SYMBOL, SafeHtmlPipe, ScrollService, SubscriptionError, SubscriptionService, UNDEFINED, Uuid, VERSION_CONFIG, VersionService, httpHeadersMock, httpMockFactory, httpResponseMock };
 //# sourceMappingURL=angular-toolbox.mjs.map