angular-toolbox 1.5.2 → 1.5.3

package/README.md

@@ -2,7 +2,7 @@
 
 A library that provides useful tools for Angular apps development.
 
-[![Angular Toolbox version](https://img.shields.io/badge/Angular%20Toolbox:1.5.2%231E90FF.svg)]()
+[![Angular Toolbox version](https://img.shields.io/badge/Angular%20Toolbox:1.5.3%231E90FF.svg)]()
 
 ## License
 

package/fesm2022/angular-toolbox.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, EventEmitter, Component, Inject, isDevMode, Optional, ChangeDetectionStrategy, Input, Pipe, Output, inject, ViewContainerRef, ViewChild, ViewEncapsulation, HostBinding, HostListener, ContentChildren, Directive } from '@angular/core';
+import { Injectable, NgModule, EventEmitter, Component, Inject, isDevMode, Optional, ChangeDetectionStrategy, Input, Pipe, Output, inject, ViewContainerRef, ViewChild, ViewEncapsulation, HostListener, HostBinding, ContentChildren, Directive } from '@angular/core';
 import { Observable, from, of } from 'rxjs';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, formatDate, CommonModule, DatePipe, NgStyle, XhrFactory } from '@angular/common';
@@ -586,8 +586,8 @@ class AbstractVersionManager {
 const ATX_VERSION_CONFIG = {
     major: 1,
     minor: 5,
-    patch: 2,
-    buildTimestamp: 1733834973900
+    patch: 3,
+    buildTimestamp: 1734518682739
 };
 /**
  * The public service that exposes the current version of the Angular Toolbox library.
@@ -8924,7 +8924,7 @@ class DropdownComponent extends IdentifiableComponent {
      *
      * @returns Returns `true` whether the dropdown is opened; `false` otherwise.
      */
-    isOpened() {
+    isOpen() {
         if (!this._popover)
             return false;
         return this._popover.nativeElement.matches(API_MATCH);
@@ -8977,6 +8977,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 args: ["button"]
             }] } });
 
+/**
+ * @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
+ */
+/**
+ * The `NavbarComponent` component is a horizontal menu. It can be used to show a list of navigation
+ * links positioned on the top side of your page.
+ */
+class NavbarComponent {
+    constructor() {
+        /**
+         * Emits a event each time the collapse state of the component changes in responsive mode.
+         */
+        this.stateChange = new EventEmitter();
+        /**
+         * @private
+         */
+        this.menuOpen = false;
+        /**
+         * @private
+         */
+        this.isResponsive = false;
+    }
+    /**
+     * A string that represents the aria label of the button when the menu is expanded in responsive mode.
+     */
+    set expandedLabel(value) {
+        this.expLabel = value;
+        this.setBtnLabel();
+    }
+    get expandedLabel() {
+        return this.expLabel;
+    }
+    /**
+     * A string that represents the aria label of the button when the menu is collapsed in responsive mode.
+     */
+    set collapsedLabel(value) {
+        this.collLabel = value;
+        this.setBtnLabel();
+    }
+    get collapsedLabel() {
+        return this.collLabel;
+    }
+    /**
+     * Forces the menu to open in responsive mode.
+     */
+    open() {
+        if (this.isResponsive === false)
+            return;
+        this.menuOpen = true;
+        this.emitStateEvt();
+    }
+    /**
+     * Forces the menu to close in responsive mode.
+     */
+    close() {
+        if (this.isResponsive === false)
+            return;
+        this.menuOpen = false;
+        this.emitStateEvt();
+    }
+    /**
+     * Returns a boolean that indicates whether the menu is currently in responsive mode (`true`),
+     * or not (`false`).
+     *
+     * @returns `true` whether the menu is in responsive mode; `false` otherwise.
+     */
+    isResponsiveMode() {
+        return this.isResponsive;
+    }
+    /**
+     * Returns a boolean that indicates whether the menu is open in responsive mode (`true`),
+     * or not (`false`).
+     *
+     * @returns `true` whether the menu is open in responsive mode; `false` otherwise.
+     */
+    isOpen() {
+        return this.menuOpen;
+    }
+    /**
+     * @private
+     */
+    ngOnInit() {
+        this.matchMedia();
+    }
+    /**
+     * @private
+     */
+    onClick() {
+        this.menuOpen = !this.menuOpen;
+        this.emitStateEvt();
+    }
+    /**
+     * @private
+     */
+    onResize() {
+        this.matchMedia();
+    }
+    /**
+     * @private
+     */
+    matchMedia() {
+        if (window.matchMedia("(max-width: 768px)").matches) {
+            if (this.isResponsive === true)
+                return;
+            this.isResponsive = true;
+            this.menuOpen = false;
+            this.setBtnLabel();
+        }
+        else {
+            if (this.isResponsive === false)
+                return;
+            this.isResponsive = this.menuOpen = false;
+            this.setBtnLabel();
+        }
+    }
+    /**
+     * @private
+     */
+    setBtnLabel() {
+        this.btnLabel = this.menuOpen ? this.expLabel : this.collLabel;
+    }
+    /**
+     * @private
+     */
+    emitStateEvt() {
+        this.stateChange.emit(this.menuOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NavbarComponent, isStandalone: true, selector: "atx-navbar", inputs: { brandLabel: "brandLabel", expandedLabel: "expandedLabel", collapsedLabel: "collapsedLabel" }, outputs: { stateChange: "stateChange" }, host: { listeners: { "window:resize": "onResize()" } }, 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<nav class=\"atx-navbar\" role=\"menubar\" [class.atx-menu-open]=\"menuOpen\">\r\n    <div class=\"atx-menu-action\">\r\n        <div class=\"atx-brand\" [attr.aria-label]=\"brandLabel\">\r\n            <ng-content select=\"[brand]\"></ng-content>\r\n        </div>\r\n        <div class=\"atx-burger\" role=\"button\" (click)=\"onClick()\" [attr.aria-label]=\"btnLabel\" [attr.title]=\"btnLabel\">\r\n            <ng-content select=\"[icon]\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <ul class=\"atx-menu\" role=\"menu\">\r\n        <ng-content></ng-content>\r\n    </ul>\r\n</nav>", styles: ["*{margin:0;padding:0;box-sizing:border-box}.atx-menu{list-style:none;display:flex;gap:1em}.atx-navbar,.atx-menu-action{display:flex;align-items:center;justify-content:space-between}.atx-burger{display:none;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.atx-navbar{flex-flow:row wrap}.atx-menu{display:none;text-align:center;width:100%}.atx-menu-action{flex-basis:100%}.atx-burger{display:block;margin-left:auto}.atx-menu-open .atx-menu{display: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\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-navbar', 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<nav class=\"atx-navbar\" role=\"menubar\" [class.atx-menu-open]=\"menuOpen\">\r\n    <div class=\"atx-menu-action\">\r\n        <div class=\"atx-brand\" [attr.aria-label]=\"brandLabel\">\r\n            <ng-content select=\"[brand]\"></ng-content>\r\n        </div>\r\n        <div class=\"atx-burger\" role=\"button\" (click)=\"onClick()\" [attr.aria-label]=\"btnLabel\" [attr.title]=\"btnLabel\">\r\n            <ng-content select=\"[icon]\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <ul class=\"atx-menu\" role=\"menu\">\r\n        <ng-content></ng-content>\r\n    </ul>\r\n</nav>", styles: ["*{margin:0;padding:0;box-sizing:border-box}.atx-menu{list-style:none;display:flex;gap:1em}.atx-navbar,.atx-menu-action{display:flex;align-items:center;justify-content:space-between}.atx-burger{display:none;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.atx-navbar{flex-flow:row wrap}.atx-menu{display:none;text-align:center;width:100%}.atx-menu-action{flex-basis:100%}.atx-burger{display:block;margin-left:auto}.atx-menu-open .atx-menu{display: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\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], propDecorators: { stateChange: [{
+                type: Output
+            }], brandLabel: [{
+                type: Input
+            }], expandedLabel: [{
+                type: Input
+            }], collapsedLabel: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 /**
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
@@ -10034,5 +10184,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_PRIDGE_REF, ATX_LOGGER_CONFIG, AbstractLogger, AbstractSubscriptionManager, AbstractVersionManager, AbstractWindowService, AnchorLinklDirective, AngularToolboxLogoComponent, AngularToolboxModule, AngularToolboxVersionService, AppBridgeError, AppBridgeService, ArrayList, ArrayListEvent, ArrayListEventType, AtxHttpMockConsoleService, AtxMockDocumentation, AtxMonitoringConsoleComponent, BIGINT, BOOLEAN, BUTTON_ROLE, BorderLayout, BorderLayoutContainer, ButtonRoleDirective, CSS_PROP, ConsoleLogConnector, ContentRendererDirective, DARK_MODE_CONFIG, DEFAULT_LOG_CONNECTOR, DarkModeService, DefaultLogConnector, DialogBackdropType, DialogOutlet, DialogOutletEvent, DialogService, DialogServiceError, DropdownComponent, DropdownEvent, DropdownEventType, EMPTY_STRING, FEATURES, FUNCTION, FetchClient, FetchClientBuilder, FetchClientResponseType, HTTP_MOCKING_FRAMEWORK_CONFIG, HTTP_MOCK_MAX_DELAY, HTTP_MOCK_SERVICE, HtmlLogConnector, HttpHeadersMockBuilder, HttpMock, HttpMockLoggingService, HttpMockProductionPolicy, HttpMockService, HttpMockServiceError, HttpResponseMockBuilder, HttpStatusText, HttpStatusTextFinder, IdentifiableComponent, IntegrityError, LINK_ROLE, LOG_CONFIG_STRING, LOG_ERROR_STRING, LOG_INFO_STRING, LOG_WARNING_STRING, LayoutDragEvent, LayoutDragEventType, LayoutRegion, LayoutRegionError, LogBuilder, LogImpl, LogLevel, LogUtil, LoggerService, NUMBER, NavigateToUrlDirective, OBJECT, STORAGE_KEY, STRING, SYMBOL, SafeHtmlPipe, ScrollService, SubscriptionError, SubscriptionService, UNDEFINED, Uuid, VERSION_CONFIG, VersionService, VersionUtil, WindowFeatureState, WindowService, WindowTarget, httpHeadersMock, httpMockFactory, httpResponseMock };
+export { APP_PRIDGE_REF, ATX_LOGGER_CONFIG, AbstractLogger, AbstractSubscriptionManager, AbstractVersionManager, AbstractWindowService, AnchorLinklDirective, AngularToolboxLogoComponent, AngularToolboxModule, AngularToolboxVersionService, AppBridgeError, AppBridgeService, ArrayList, ArrayListEvent, ArrayListEventType, AtxHttpMockConsoleService, AtxMockDocumentation, AtxMonitoringConsoleComponent, BIGINT, BOOLEAN, BUTTON_ROLE, BorderLayout, BorderLayoutContainer, ButtonRoleDirective, CSS_PROP, ConsoleLogConnector, ContentRendererDirective, DARK_MODE_CONFIG, DEFAULT_LOG_CONNECTOR, DarkModeService, DefaultLogConnector, DialogBackdropType, DialogOutlet, DialogOutletEvent, DialogService, DialogServiceError, DropdownComponent, DropdownEvent, DropdownEventType, EMPTY_STRING, FEATURES, FUNCTION, FetchClient, FetchClientBuilder, FetchClientResponseType, HTTP_MOCKING_FRAMEWORK_CONFIG, HTTP_MOCK_MAX_DELAY, HTTP_MOCK_SERVICE, HtmlLogConnector, HttpHeadersMockBuilder, HttpMock, HttpMockLoggingService, HttpMockProductionPolicy, HttpMockService, HttpMockServiceError, HttpResponseMockBuilder, HttpStatusText, HttpStatusTextFinder, IdentifiableComponent, IntegrityError, LINK_ROLE, LOG_CONFIG_STRING, LOG_ERROR_STRING, LOG_INFO_STRING, LOG_WARNING_STRING, LayoutDragEvent, LayoutDragEventType, LayoutRegion, LayoutRegionError, LogBuilder, LogImpl, LogLevel, LogUtil, LoggerService, NUMBER, NavbarComponent, NavigateToUrlDirective, OBJECT, STORAGE_KEY, STRING, SYMBOL, SafeHtmlPipe, ScrollService, SubscriptionError, SubscriptionService, UNDEFINED, Uuid, VERSION_CONFIG, VersionService, VersionUtil, WindowFeatureState, WindowService, WindowTarget, httpHeadersMock, httpMockFactory, httpResponseMock };
 //# sourceMappingURL=angular-toolbox.mjs.map