angular-toolbox 1.3.1 → 1.3.3

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, ViewEncapsulation, HostBinding, HostListener, ViewChild, ContentChildren, Directive } from '@angular/core';
+import { Injectable, NgModule, EventEmitter, Component, Inject, isDevMode, Optional, ChangeDetectionStrategy, Input, Pipe, Output, inject, ViewEncapsulation, ViewChild, HostBinding, HostListener, 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';
@@ -583,11 +583,11 @@ class AbstractVersionManager {
  * @private
  * The current version of the Angular Toolbox library.
  */
-const LAYERS_VERSION_CONFIG = {
+const ATX_VERSION_CONFIG = {
     major: 1,
     minor: 3,
-    patch: 1,
-    buildTimestamp: 1726585120773
+    patch: 3,
+    buildTimestamp: 1727082987006
 };
 /**
  * The public service that exposes the current version of the Angular Toolbox library.
@@ -597,7 +597,7 @@ class AngularToolboxVersionService extends AbstractVersionManager {
      * @private
      */
     constructor() {
-        super(LAYERS_VERSION_CONFIG);
+        super(ATX_VERSION_CONFIG);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AngularToolboxVersionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AngularToolboxVersionService }); }
@@ -1163,6 +1163,79 @@ var LayoutDragEventType;
     LayoutDragEventType["DRAGGING"] = "dragging";
 })(LayoutDragEventType || (LayoutDragEventType = {}));
 
+/**
+ * @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
+ */
+/**
+ * The `DropdownEvent` class is an event that represents an interaction with a dropdown container.
+ */
+class DropdownEvent {
+    /**
+     * Creates a new `DropdownEvent` instance.
+     *
+     * @param target The dropdown container that triggered this event.
+     * @param type The type of this event.
+     * @param newState The state the dropdown container is transitioning to.
+     * @param oldState The state the dropdown container is transitioning from.
+     */
+    constructor(target, type, newState, oldState) {
+        this.target = target;
+        this.type = type;
+        this.newState = newState;
+        this.oldState = oldState;
+    }
+}
+
+/**
+ * @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 type of a `DropdownEvent` instance.
+ */
+var DropdownEventType;
+(function (DropdownEventType) {
+    /**
+     * Defines an event fired on a dropdown component just after it is shown or hidden.
+     */
+    DropdownEventType["TOGGLE"] = "toggle";
+    /**
+     * Defines an event fired on a dropdown component just before it is shown or hidden.
+     */
+    DropdownEventType["BEFORE_TOGGLE"] = "beforetoggle";
+})(DropdownEventType || (DropdownEventType = {}));
+
+/**
+ * @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.
@@ -7851,6 +7924,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                     type: Optional
                 }] }] });
 
+/**
+ * @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 API_MATCH = ':popover-open';
+/**
+ * The ATX dropdown component allows to create popup containers that are displayed by clicking on a button.
+ * The content of the container is defined by Developer.
+ * This component is part of the LAF-less API.
+ */
+class DropdownComponent extends IdentifiableComponent {
+    /**
+     * @private
+     */
+    constructor() {
+        super();
+        /**
+         * An event fired on the dropdown component just after it is shown or hidden.
+         */
+        this.toggle = new EventEmitter();
+        /**
+         * An event fired on the dropdown component just before it is shown or hidden.
+         */
+        this.beforeToggle = new EventEmitter();
+        /**
+         * Sets the vertical position of the content container.
+         */
+        this.vPos = "bottom";
+        /**
+         * Sets the horizontal position of the content container.
+         */
+        this.hPos = "left";
+        /**
+         * Indicates whether the content container can be "light dismissed" by selecting outside the popover area
+         * (`auto`), or not (`manual`).
+         */
+        this.popoverState = "auto";
+        this.id = this.getID().toString();
+    }
+    /**
+     * Hides the dropdown container.
+     */
+    hideContent() {
+        if (!this._popover)
+            return;
+        this._popover.nativeElement.hidePopover();
+    }
+    /**
+     * Displays the dropdown container.
+     */
+    showContent() {
+        if (!this._popover)
+            return;
+        this._popover.nativeElement.showPopover();
+    }
+    /**
+     * Returns the display state of the dropdown.
+     *
+     * @returns Returns `true` whether the dropdown is opened; `false` otherwise.
+     */
+    isOpened() {
+        if (!this._popover)
+            return false;
+        return this._popover.nativeElement.matches(API_MATCH);
+    }
+    /**
+     * @private
+     */
+    onBeforeToggle(event) {
+        this.beforeToggle.emit(this.buildEvent(event, DropdownEventType.BEFORE_TOGGLE));
+    }
+    /**
+     * @private
+     */
+    onToggle(event) {
+        this.toggle.emit(this.buildEvent(event, DropdownEventType.TOGGLE));
+    }
+    /**
+     * @private
+     */
+    buildEvent(event, type) {
+        return new DropdownEvent(this, type, event.newState, event.oldState);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: DropdownComponent, isStandalone: true, selector: "atx-dropdown", inputs: { buttonClass: "buttonClass", containerClass: "containerClass", vPos: "vPos", hPos: "hPos", popoverState: "popoverState" }, outputs: { toggle: "toggle", beforeToggle: "beforeToggle" }, viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], 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<div class=\"atx-dropdown-container\" [class]=\"containerClass\">\r\n    <button [class]=\"buttonClass\" [attr.popovertarget]=\"id\">\r\n        <ng-content></ng-content>\r\n    </button>\r\n    <div #popover [attr.popover]=\"popoverState\" [attr.id]=\"id\" (toggle)=\"onToggle($event)\" (beforetoggle)=\"onBeforeToggle($event)\"></div>\r\n    <div class=\"atx-dropdown-popover\"\r\n         [class.atx-dropdown-v-start]=\"vPos === 'start'\"\r\n         [class.atx-dropdown-top]=\"vPos === 'top'\"\r\n         [class.atx-dropdown-middle]=\"vPos === 'middle'\"\r\n         [class.atx-dropdown-bottom]=\"vPos === 'bottom'\"\r\n         [class.atx-dropdown-v-end]=\"vPos === 'end'\"\r\n         [class.atx-dropdown-h-start]=\"hPos === 'start'\"\r\n         [class.atx-dropdown-left]=\"hPos === 'left'\"\r\n         [class.atx-dropdown-center]=\"hPos === 'center'\"\r\n         [class.atx-dropdown-right]=\"hPos === 'right'\"\r\n         [class.atx-dropdown-h-end]=\"hPos === 'end'\"\r\n         [class.atx-dropdown-centered]=\"hPos === 'center' && vPos === 'middle'\">\r\n        <ng-content select=\"[content]\"></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".atx-dropdown-container{position:relative}[popover]:popover-open{inset:unset;border:none;background:none;margin:0;padding:0}[popover]:popover-open+.atx-dropdown-popover{display:block}.atx-dropdown-popover{display:none;position:absolute;left:0;margin:0;padding:0;z-index:100;height:auto;width:max-content}.atx-dropdown-v-start{bottom:unset;top:0}.atx-dropdown-top{bottom:calc(100% + var(--atx-dropdown-gutter, 2px));top:unset}.atx-dropdown-middle{bottom:unset;top:50%;transform:translateY(-50%)}.atx-dropdown-bottom{bottom:unset;top:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-v-end{bottom:0;top:unset}.atx-dropdown-h-start{right:calc(100% + var(--atx-dropdown-gutter, 2px));left:unset}.atx-dropdown-left{left:0;right:unset}.atx-dropdown-center{left:50%;transform:translate(-50%);right:unset}.atx-dropdown-right{right:0;left:unset}.atx-dropdown-h-end{right:unset;left:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-centered{transform:translate(-50%,-50%)}\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: "18.0.3", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'atx-dropdown', standalone: true, 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<div class=\"atx-dropdown-container\" [class]=\"containerClass\">\r\n    <button [class]=\"buttonClass\" [attr.popovertarget]=\"id\">\r\n        <ng-content></ng-content>\r\n    </button>\r\n    <div #popover [attr.popover]=\"popoverState\" [attr.id]=\"id\" (toggle)=\"onToggle($event)\" (beforetoggle)=\"onBeforeToggle($event)\"></div>\r\n    <div class=\"atx-dropdown-popover\"\r\n         [class.atx-dropdown-v-start]=\"vPos === 'start'\"\r\n         [class.atx-dropdown-top]=\"vPos === 'top'\"\r\n         [class.atx-dropdown-middle]=\"vPos === 'middle'\"\r\n         [class.atx-dropdown-bottom]=\"vPos === 'bottom'\"\r\n         [class.atx-dropdown-v-end]=\"vPos === 'end'\"\r\n         [class.atx-dropdown-h-start]=\"hPos === 'start'\"\r\n         [class.atx-dropdown-left]=\"hPos === 'left'\"\r\n         [class.atx-dropdown-center]=\"hPos === 'center'\"\r\n         [class.atx-dropdown-right]=\"hPos === 'right'\"\r\n         [class.atx-dropdown-h-end]=\"hPos === 'end'\"\r\n         [class.atx-dropdown-centered]=\"hPos === 'center' && vPos === 'middle'\">\r\n        <ng-content select=\"[content]\"></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".atx-dropdown-container{position:relative}[popover]:popover-open{inset:unset;border:none;background:none;margin:0;padding:0}[popover]:popover-open+.atx-dropdown-popover{display:block}.atx-dropdown-popover{display:none;position:absolute;left:0;margin:0;padding:0;z-index:100;height:auto;width:max-content}.atx-dropdown-v-start{bottom:unset;top:0}.atx-dropdown-top{bottom:calc(100% + var(--atx-dropdown-gutter, 2px));top:unset}.atx-dropdown-middle{bottom:unset;top:50%;transform:translateY(-50%)}.atx-dropdown-bottom{bottom:unset;top:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-v-end{bottom:0;top:unset}.atx-dropdown-h-start{right:calc(100% + var(--atx-dropdown-gutter, 2px));left:unset}.atx-dropdown-left{left:0;right:unset}.atx-dropdown-center{left:50%;transform:translate(-50%);right:unset}.atx-dropdown-right{right:0;left:unset}.atx-dropdown-h-end{right:unset;left:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-centered{transform:translate(-50%,-50%)}\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"] }]
+        }], ctorParameters: () => [], propDecorators: { toggle: [{
+                type: Output
+            }], beforeToggle: [{
+                type: Output
+            }], buttonClass: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], vPos: [{
+                type: Input
+            }], hPos: [{
+                type: Input
+            }], popoverState: [{
+                type: Input
+            }], _popover: [{
+                type: ViewChild,
+                args: ["popover"]
+            }] } });
+
 /**
  * @license
  * Copyright Pascal ECHEMANN. All Rights Reserved.
@@ -8418,6 +8605,7 @@ class BorderLayoutRenderer extends IdentifiableComponent {
 /**
  * A border layout lays out a container, arranging and resizing its components to fit in five regions: north, south, east, west, and center.
  * Each region is defined by a `BorderLayoutContainer` instance, and is identified by a corresponding constant: `NORTH`, `SOUTH`, `EAST`, `WEST`, and `CENTER`.
+ * This component is part of the LAF-less API.
  */
 class BorderLayout extends IdentifiableComponent {
     /**
@@ -8828,5 +9016,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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, AtxMonitoringConsoleComponent, BIGINT, BOOLEAN, BUTTON_ROLE, BorderLayout, BorderLayoutContainer, ButtonRoleDirective, CSS_PROP, ConsoleLogConnector, ContentRendererDirective, DARK_MODE_CONFIG, DEFAULT_LOG_CONNECTOR, DarkModeService, DefaultLogConnector, 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, IdentifiableComponent, IntegrityError, LINK_ROLE, LOG_CONFIG_STRING, LOG_ERROR_STRING, LOG_INFO_STRING, LOG_WARNING_STRING, LayoutDragEvent, LayoutDragEventType, LayoutRegion, 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, AtxMonitoringConsoleComponent, BIGINT, BOOLEAN, BUTTON_ROLE, BorderLayout, BorderLayoutContainer, ButtonRoleDirective, CSS_PROP, ConsoleLogConnector, ContentRendererDirective, DARK_MODE_CONFIG, DEFAULT_LOG_CONNECTOR, DarkModeService, DefaultLogConnector, 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, IdentifiableComponent, IntegrityError, LINK_ROLE, LOG_CONFIG_STRING, LOG_ERROR_STRING, LOG_INFO_STRING, LOG_WARNING_STRING, LayoutDragEvent, LayoutDragEventType, LayoutRegion, 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 };
 //# sourceMappingURL=angular-toolbox.mjs.map