ng-hub-ui-utils 1.0.0 → 1.2.0

package/fesm2022/ng-hub-ui-utils.mjs

@@ -1,7 +1,7 @@
-import { fromEvent, Observable, EMPTY, of, Subject, timer, race } from 'rxjs';
+import { fromEvent, Observable, Subject, isObservable, EMPTY, of, timer, race } from 'rxjs';
 import { takeUntil, map, filter, withLatestFrom, endWith, take, mergeMap, tap } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { inject, ApplicationRef, Injector, ViewContainerRef, NgZone, TemplateRef, Injectable } from '@angular/core';
+import { InjectionToken, inject, Injectable, ElementRef, TemplateRef, createComponent, ApplicationRef, Pipe, ChangeDetectorRef, Injector, ViewContainerRef, NgZone } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 const FOCUSABLE_ELEMENTS_SELECTOR = [
@@ -91,6 +91,59 @@ function isInteger(value) {
 function isDefined(value) {
     return value !== undefined && value !== null;
 }
+/**
+ * Determines if two objects or values are equivalent.
+ *
+ * @param o1 Object or value to compare.
+ * @param o2 Object or value to compare.
+ * @returns true if arguments are equal.
+ */
+function equals(o1, o2) {
+    if (o1 === o2) {
+        return true;
+    }
+    if (o1 === null || o2 === null) {
+        return false;
+    }
+    if (o1 !== o1 && o2 !== o2) {
+        return true;
+    } // NaN === NaN
+    let t1 = typeof o1, t2 = typeof o2, length, key, keySet;
+    if (t1 == t2 && t1 == 'object') {
+        if (Array.isArray(o1)) {
+            if (!Array.isArray(o2)) {
+                return false;
+            }
+            if ((length = o1.length) == o2.length) {
+                for (key = 0; key < length; key++) {
+                    if (!equals(o1[key], o2[key])) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+        }
+        else {
+            if (Array.isArray(o2)) {
+                return false;
+            }
+            keySet = Object.create(null);
+            for (key in o1) {
+                if (!equals(o1[key], o2[key])) {
+                    return false;
+                }
+                keySet[key] = true;
+            }
+            for (key in o2) {
+                if (!(key in keySet) && typeof o2[key] !== 'undefined') {
+                    return false;
+                }
+            }
+            return true;
+        }
+    }
+    return false;
+}
 /**
  * Checks if a value is a Promise.
  *
@@ -176,6 +229,49 @@ function runInZone(zone) {
 function removeAccents(str) {
     return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 }
+/**
+ * Replaces placeholders in a string with corresponding values from a given object.
+ *
+ * @param expr a string that represents the expression to be interpolated.
+ * @param params an optional object that contains the values to be interpolated into the expr string.
+ * @returns the interpolated string.
+ */
+function interpolateString(expr = '', params = {}, templateMatcher = /{{\s?([^{}\s]*)\s?}}/g) {
+    if (!params) {
+        return expr;
+    }
+    return expr.replace(templateMatcher, (substring, b) => {
+        let r = getValue(params, b);
+        return isDefined(r) ? r : substring;
+    });
+}
+/**
+ * Retrieves the value of a nested property from an object using dot notation.
+ *
+ * @param target the object from which you want to retrieve a value.
+ * @param key a string that represents the property or nested properties of the target object.
+ * @returns the value of the specified key in the target object.
+ */
+function getValue(target, key) {
+    let keys = typeof key === 'string' ? key.split('.') : [key];
+    key = '';
+    do {
+        key += keys.shift();
+        if (isDefined(target) &&
+            isDefined(target[key]) &&
+            (typeof target[key] === 'object' || !keys.length)) {
+            target = target[key];
+            key = '';
+        }
+        else if (!keys.length) {
+            target = undefined;
+        }
+        else {
+            key += '.';
+        }
+    } while (keys.length);
+    return target;
+}
 /**
  * Returns the active element in the given root.
  *
@@ -191,6 +287,679 @@ function getActiveElement(root = document) {
         : activeEl;
 }
 
+const HUB_TRANSLATION_CONFIG = new InjectionToken('HUB_TRANSLATION_CONFIG');
+
+class HubTranslationService {
+    #config = inject(HUB_TRANSLATION_CONFIG, { optional: true }) ?? {};
+    defaultTranslations = this.#config.dictionaries ?? {};
+    translations;
+    translationSource = new Subject();
+    translationObserver = this.translationSource.asObservable();
+    constructor() {
+        this.initialize();
+    }
+    initialize() {
+        const language = this.#config.language ?? this.#config.fallbackLanguage ?? 'en';
+        const fallbackLanguage = this.#config.fallbackLanguage ?? 'en';
+        const fallbackTranslations = this.defaultTranslations[fallbackLanguage] ?? {};
+        const selectedTranslations = this.defaultTranslations[language] ?? fallbackTranslations;
+        this.setTranslations(selectedTranslations);
+    }
+    /**
+     * Retrieves a value from a translations object based on a given key.
+     */
+    getTranslation(key) {
+        return getValue(this.translations, key);
+    }
+    /**
+     * Merges fallback translations with the provided translations and updates observers.
+     */
+    setTranslations(translations = {}) {
+        const fallbackLanguage = this.#config.fallbackLanguage ?? 'en';
+        const fallbackTranslations = this.defaultTranslations[fallbackLanguage] ?? {};
+        const nextTranslations = translations ?? {};
+        this.translations = { ...fallbackTranslations, ...nextTranslations };
+        this.translationSource.next(this.translations);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubTranslationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubTranslationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Positions an overlay container relative to an origin element.
+ * The first configured position that fits within the viewport is applied.
+ */
+class OverlayPosition {
+    _origin = null;
+    _positions = [];
+    /**
+     * Sets the origin element used to position the overlay.
+     *
+     * @param origin Element reference or HTMLElement.
+     * @returns This position instance for chaining.
+     */
+    flexibleConnectedTo(origin) {
+        this._origin = origin;
+        return this;
+    }
+    /**
+     * Sets the preferred positions for the overlay.
+     * The order of the array determines the fallback priority.
+     *
+     * @param positions Array of position configurations.
+     * @returns This position instance for chaining.
+     */
+    withPositions(positions) {
+        this._positions = positions;
+        return this;
+    }
+    /**
+     * Applies the calculated position to the overlay element.
+     *
+     * @param overlayElement The overlay container element.
+     */
+    apply(overlayElement) {
+        if (!this._origin) {
+            return;
+        }
+        const originElement = this._origin instanceof ElementRef ? this._origin.nativeElement : this._origin;
+        const originRect = originElement.getBoundingClientRect();
+        // Try each position until we find one that fits in the viewport
+        for (const position of this._positions) {
+            const coords = this._calculatePosition(originRect, overlayElement, position);
+            if (this._fitsInViewport(coords, overlayElement)) {
+                this._applyPosition(overlayElement, coords);
+                return;
+            }
+        }
+        // If no position fits perfectly, use the first one
+        if (this._positions.length > 0) {
+            const coords = this._calculatePosition(originRect, overlayElement, this._positions[0]);
+            this._applyPosition(overlayElement, coords);
+        }
+    }
+    /**
+     * Calculates the position coordinates based on the configuration.
+     *
+     * @param originRect Bounding rectangle of the origin element.
+     * @param overlayElement The overlay element.
+     * @param position Position configuration.
+     * @returns Calculated x and y coordinates.
+     */
+    _calculatePosition(originRect, overlayElement, position) {
+        const overlayRect = overlayElement.getBoundingClientRect();
+        // Calculate origin point
+        let x = this._getOriginX(originRect, position.originX);
+        let y = this._getOriginY(originRect, position.originY);
+        // Adjust for overlay alignment
+        x -= this._getOverlayX(overlayRect, position.overlayX);
+        y -= this._getOverlayY(overlayRect, position.overlayY);
+        // Apply offsets
+        if (position.offsetX) {
+            x += position.offsetX;
+        }
+        if (position.offsetY) {
+            y += position.offsetY;
+        }
+        return { x, y };
+    }
+    /**
+     * Gets the X coordinate for the origin point.
+     */
+    _getOriginX(rect, position) {
+        switch (position) {
+            case 'start':
+                return rect.left;
+            case 'center':
+                return rect.left + rect.width / 2;
+            case 'end':
+                return rect.right;
+        }
+    }
+    /**
+     * Gets the Y coordinate for the origin point.
+     */
+    _getOriginY(rect, position) {
+        switch (position) {
+            case 'top':
+                return rect.top;
+            case 'center':
+                return rect.top + rect.height / 2;
+            case 'bottom':
+                return rect.bottom;
+        }
+    }
+    /**
+     * Gets the X offset for the overlay alignment.
+     */
+    _getOverlayX(rect, position) {
+        switch (position) {
+            case 'start':
+                return 0;
+            case 'center':
+                return rect.width / 2;
+            case 'end':
+                return rect.width;
+        }
+    }
+    /**
+     * Gets the Y offset for the overlay alignment.
+     */
+    _getOverlayY(rect, position) {
+        switch (position) {
+            case 'top':
+                return 0;
+            case 'center':
+                return rect.height / 2;
+            case 'bottom':
+                return rect.height;
+        }
+    }
+    /**
+     * Checks if the overlay fits within the viewport at the given coordinates.
+     */
+    _fitsInViewport(coords, overlayElement) {
+        const overlayRect = overlayElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        return (coords.x >= 0 &&
+            coords.y >= 0 &&
+            coords.x + overlayRect.width <= viewportWidth &&
+            coords.y + overlayRect.height <= viewportHeight);
+    }
+    /**
+     * Applies the calculated position to the overlay element.
+     */
+    _applyPosition(overlayElement, coords) {
+        overlayElement.style.left = `${coords.x}px`;
+        overlayElement.style.top = `${coords.y}px`;
+    }
+}
+
+/**
+ * Manages a single overlay instance created by {@link OverlayService}.
+ * Creates a container and optional backdrop in `document.body` and attaches
+ * either a template or component as the overlay content.
+ */
+class OverlayRef {
+    _config;
+    _appRef;
+    _backdropElement = null;
+    _containerElement = null;
+    _contentElement = null;
+    _viewRef = null;
+    _componentRef = null;
+    _isAttached = false;
+    _backdropClickCallback;
+    _backdropClickHandler;
+    constructor(_config, _appRef) {
+        this._config = _config;
+        this._appRef = _appRef;
+    }
+    /**
+     * Attaches content to the overlay.
+     *
+     * If the overlay is already attached, it only updates the position strategy
+     * and returns the existing content element.
+     *
+     * @param content Template or component type to attach.
+     * @param viewContainerRef View container used to create embedded views for templates.
+     * @returns The attached content element (first root node).
+     * @throws When a {@link TemplateRef} is provided without a {@link ViewContainerRef}.
+     */
+    attach(content, viewContainerRef) {
+        // If already attached, just update position and return existing element
+        if (this._isAttached && this._contentElement) {
+            if (this._config.positionStrategy) {
+                this._config.positionStrategy.apply(this._containerElement);
+            }
+            return this._contentElement;
+        }
+        this._createContainer();
+        this._createBackdrop();
+        let contentElement;
+        if (content instanceof TemplateRef) {
+            if (!viewContainerRef) {
+                throw new Error('ViewContainerRef is required when attaching a TemplateRef');
+            }
+            // Only create and attach view if not already created
+            if (!this._viewRef) {
+                this._viewRef = viewContainerRef.createEmbeddedView(content);
+                this._viewRef.detectChanges();
+            }
+            contentElement = this._viewRef.rootNodes[0];
+        }
+        else {
+            if (this._componentRef) {
+                this._appRef.detachView(this._componentRef.hostView);
+                this._componentRef.destroy();
+            }
+            this._componentRef = createComponent(content, {
+                environmentInjector: this._appRef.injector
+            });
+            this._appRef.attachView(this._componentRef.hostView);
+            contentElement = this._componentRef.hostView
+                .rootNodes[0];
+        }
+        this._contentElement = contentElement;
+        // Only append if not already in container
+        if (!this._containerElement.contains(contentElement)) {
+            this._containerElement.appendChild(contentElement);
+        }
+        this._isAttached = true;
+        // Apply position strategy
+        if (this._config.positionStrategy) {
+            this._config.positionStrategy.apply(this._containerElement);
+        }
+        return contentElement;
+    }
+    /**
+     * Detaches the content from the overlay container without disposing the overlay.
+     */
+    detach() {
+        if (!this._isAttached) {
+            return;
+        }
+        if (this._contentElement && this._containerElement) {
+            this._containerElement.removeChild(this._contentElement);
+        }
+        this._isAttached = false;
+    }
+    /**
+     * Disposes the overlay and cleans up all allocated resources.
+     */
+    dispose() {
+        this.detach();
+        // Destroy view ref if exists
+        if (this._viewRef) {
+            this._viewRef.destroy();
+            this._viewRef = null;
+        }
+        if (this._componentRef) {
+            this._appRef.detachView(this._componentRef.hostView);
+            this._componentRef.destroy();
+            this._componentRef = null;
+        }
+        if (this._containerElement) {
+            document.body.removeChild(this._containerElement);
+            this._containerElement = null;
+        }
+        if (this._backdropElement) {
+            // Remove event listener before removing element from DOM
+            if (this._backdropClickHandler) {
+                this._backdropElement.removeEventListener('click', this._backdropClickHandler);
+                this._backdropClickHandler = undefined;
+            }
+            document.body.removeChild(this._backdropElement);
+            this._backdropElement = null;
+        }
+        this._contentElement = null;
+        this._backdropClickCallback = undefined;
+    }
+    /**
+     * Checks whether content is currently attached to the overlay.
+     */
+    hasAttached() {
+        return this._isAttached;
+    }
+    /**
+     * Registers a callback for backdrop clicks.
+     * The last registered callback replaces any previous one.
+     *
+     * @param callback Function to call when the backdrop is clicked.
+     */
+    onBackdropClick(callback) {
+        this._backdropClickCallback = callback;
+    }
+    /**
+     * Re-applies the configured position strategy to the overlay container.
+     */
+    updatePosition() {
+        if (this._config.positionStrategy && this._containerElement) {
+            this._config.positionStrategy.apply(this._containerElement);
+        }
+    }
+    /**
+     * Creates the overlay container element and appends it to the document.
+     */
+    _createContainer() {
+        if (this._containerElement) {
+            return;
+        }
+        this._containerElement = document.createElement('div');
+        this._containerElement.classList.add('hub-overlay-container');
+        if (this._config.panelClass) {
+            const classes = Array.isArray(this._config.panelClass)
+                ? this._config.panelClass
+                : [this._config.panelClass];
+            classes.forEach((cls) => this._containerElement.classList.add(cls));
+        }
+        if (this._config.width) {
+            this._containerElement.style.width =
+                typeof this._config.width === 'number'
+                    ? `${this._config.width}px`
+                    : this._config.width;
+        }
+        if (this._config.height) {
+            this._containerElement.style.height =
+                typeof this._config.height === 'number'
+                    ? `${this._config.height}px`
+                    : this._config.height;
+        }
+        this._containerElement.style.position = 'fixed';
+        this._containerElement.style.zIndex = '1000';
+        document.body.appendChild(this._containerElement);
+    }
+    /**
+     * Creates the backdrop element if enabled and appends it to the document.
+     */
+    _createBackdrop() {
+        if (!this._config.hasBackdrop || this._backdropElement) {
+            return;
+        }
+        this._backdropElement = document.createElement('div');
+        this._backdropElement.classList.add('hub-overlay-backdrop');
+        if (this._config.backdropClass) {
+            this._backdropElement.classList.add(this._config.backdropClass);
+        }
+        this._backdropElement.style.position = 'fixed';
+        this._backdropElement.style.top = '0';
+        this._backdropElement.style.left = '0';
+        this._backdropElement.style.width = '100%';
+        this._backdropElement.style.height = '100%';
+        this._backdropElement.style.zIndex = '999';
+        // Store reference to the handler for cleanup
+        this._backdropClickHandler = () => {
+            if (this._backdropClickCallback) {
+                this._backdropClickCallback();
+            }
+        };
+        this._backdropElement.addEventListener('click', this._backdropClickHandler);
+        document.body.appendChild(this._backdropElement);
+    }
+}
+
+/**
+ * Service for creating and managing overlay instances.
+ */
+class OverlayService {
+    _appRef = inject(ApplicationRef);
+    /**
+     * Creates a new overlay with the specified configuration.
+     *
+     * @param config Configuration options for the overlay.
+     * @returns A reference to the created overlay.
+     */
+    create(config = {}) {
+        return new OverlayRef(config, this._appRef);
+    }
+    /**
+     * Creates a position strategy builder for connected overlays.
+     *
+     * @returns A new {@link OverlayPosition} instance.
+     */
+    position() {
+        return new OverlayPosition();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class GetPipe {
+    /**
+     * @param value The object to retrieve the property from.
+     * @param path The dot-separated path string to the property.
+     * @param defaultValue The value to return if the property is not found.
+     */
+    transform(value, path, defaultValue) {
+        if (typeof path !== 'string') {
+            return value;
+        }
+        return path
+            .split('.')
+            .reduce((a, c) => a && a[c] !== null && a[c] !== undefined
+            ? a[c]
+            : defaultValue || null, value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: GetPipe, isStandalone: true, name: "get" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GetPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'get',
+                    standalone: true
+                }]
+        }] });
+
+class IsObjectPipe {
+    transform(value) {
+        return typeof value === 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsObjectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: IsObjectPipe, isStandalone: true, name: "isObject" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsObjectPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isObject'
+                }]
+        }] });
+
+class IsObservablePipe {
+    transform(value) {
+        return isObservable(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: IsObservablePipe, isStandalone: true, name: "isObservable" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsObservablePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isObservable',
+                    standalone: true
+                }]
+        }] });
+
+class IsStringPipe {
+    transform(value) {
+        return typeof value === 'string';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: IsStringPipe, isStandalone: true, name: "isString" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsStringPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isString'
+                }]
+        }] });
+
+class TranslatePipe {
+    _ref = inject(ChangeDetectorRef);
+    _translationSvc = inject(HubTranslationService);
+    value = '';
+    lastKey = null;
+    lastParams = [];
+    translationSubscription;
+    /**
+     * Updates the value of a key by interpolating the translation and marking for change detection.
+     */
+    updateValue(key, interpolateParams) {
+        const value = interpolateString(this._translationSvc.getTranslation(key), interpolateParams);
+        this.value = value !== undefined ? value : key;
+        this.lastKey = key;
+        this._ref.markForCheck();
+    }
+    /**
+     * Transforms a translation key with optional interpolation params.
+     */
+    transform(query, ...args) {
+        if (!query || !query.length) {
+            return query;
+        }
+        // If we ask another time for the same key, return the last value.
+        if (equals(query, this.lastKey) && equals(args, this.lastParams)) {
+            return this.value;
+        }
+        let interpolateParams = undefined;
+        if (isDefined(args[0]) && args.length) {
+            if (typeof args[0] === 'string' && args[0].length) {
+                // We accept objects written in the template such as {n:1}, {'n':1}, {n:'v'}.
+                // This converts them to valid JSON.
+                let validArgs = args[0]
+                    .replace(/(\')?([a-zA-Z0-9_]+)(\')?(\s)?:/g, '"$2":')
+                    .replace(/:(\s)?(\')(.*?)(\')/g, ':"$3"');
+                try {
+                    interpolateParams = JSON.parse(validArgs);
+                }
+                catch (e) {
+                    throw new SyntaxError(`Wrong parameter in TranslatePipe. Expected a valid Object, received: ${args[0]}`);
+                }
+            }
+            else if (typeof args[0] === 'object' && !Array.isArray(args[0])) {
+                interpolateParams = args[0];
+            }
+        }
+        // Store the query, in case it changes.
+        this.lastKey = query;
+        // Store the params, in case they change.
+        this.lastParams = args;
+        // Set the value.
+        this.updateValue(query, interpolateParams);
+        // Clean any existing subscription.
+        this._dispose();
+        if (!this.translationSubscription) {
+            this.translationSubscription =
+                this._translationSvc.translationObserver.subscribe(() => {
+                    if (this.lastKey) {
+                        this.lastKey = null;
+                        this.updateValue(query, interpolateParams);
+                    }
+                });
+        }
+        return this.value;
+    }
+    /**
+     * Clean any existing subscription to change events.
+     */
+    _dispose() {
+        if (typeof this.translationSubscription !== 'undefined') {
+            this.translationSubscription.unsubscribe();
+            this.translationSubscription = undefined;
+        }
+    }
+    ngOnDestroy() {
+        this._dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
+class UcfirstPipe {
+    transform(value = '') {
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UcfirstPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: UcfirstPipe, isStandalone: true, name: "ucfirst" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UcfirstPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'ucfirst',
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * A standalone pipe that unwraps the value of an observable or returns the value directly if it's not an observable.
+ *
+ * @description
+ * The `UnwrapAsyncPipe` is used to unwrap the value emitted by an observable or return the value directly if it's not an observable.
+ * It subscribes to the observable and returns the emitted value. If the input is not an observable, it simply returns the value.
+ *
+ * @usageNotes
+ * ```html
+ * <div>{{ observableOrValue | unwrapAsync }}</div>
+ * ```
+ *
+ * @publicApi
+ */
+class UnwrapAsyncPipe {
+    #cdr = inject(ChangeDetectorRef);
+    /**
+     * The unwrapped value of the observable or the direct value.
+     */
+    value = null;
+    /**
+     * The subscription to the observable.
+     */
+    subscription = null;
+    /**
+     * Performs cleanup tasks when the pipe is destroyed.
+     */
+    ngOnDestroy() {
+        this.unsubscribe();
+    }
+    /**
+     * Transforms the input value.
+     *
+     * @param value The input value to transform. It can be an observable or a direct value.
+     * @returns The unwrapped value of the observable or the direct value.
+     */
+    transform(value) {
+        if (value instanceof Observable) {
+            this.unsubscribe();
+            this.subscription = value.subscribe((result) => {
+                this.value = result;
+                this.#cdr.markForCheck();
+            });
+        }
+        else {
+            // Clean up subscription when switching to direct value
+            this.unsubscribe();
+            this.value = value;
+        }
+        return this.value;
+    }
+    /**
+     * Unsubscribes from the current subscription.
+     */
+    unsubscribe() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UnwrapAsyncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: UnwrapAsyncPipe, isStandalone: true, name: "unwrapAsync", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UnwrapAsyncPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'unwrapAsync',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
 function getTransitionDurationMs(element) {
     const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
     const transitionDelaySec = parseFloat(transitionDelay);
@@ -272,6 +1041,9 @@ const hubCompleteTransition = (element) => {
 };
 
 class ContentRef {
+    nodes;
+    viewRef;
+    componentRef;
     constructor(nodes, viewRef, componentRef) {
         this.nodes = nodes;
         this.viewRef = viewRef;
@@ -279,15 +1051,16 @@ class ContentRef {
     }
 }
 class PopupService {
+    _componentType;
+    _windowRef = null;
+    _contentRef = null;
+    _document = inject(DOCUMENT);
+    _applicationRef = inject(ApplicationRef);
+    _injector = inject(Injector);
+    _viewContainerRef = inject(ViewContainerRef);
+    _ngZone = inject(NgZone);
     constructor(_componentType) {
         this._componentType = _componentType;
-        this._windowRef = null;
-        this._contentRef = null;
-        this._document = inject(DOCUMENT);
-        this._applicationRef = inject(ApplicationRef);
-        this._injector = inject(Injector);
-        this._viewContainerRef = inject(ViewContainerRef);
-        this._ngZone = inject(NgZone);
     }
     open(content, templateContext, animation = false) {
         if (!this._windowRef) {
@@ -339,9 +1112,7 @@ class PopupService {
  * by adding an equivalent padding on the right of the body, and to revert this change.
  */
 class ScrollBar {
-    constructor() {
-        this._document = inject(DOCUMENT);
-    }
+    _document = inject(DOCUMENT);
     /**
      * To be called to hide a potential vertical scrollbar:
      * - if a scrollbar is there and has a width greater than 0, adds some compensation
@@ -367,10 +1138,10 @@ class ScrollBar {
             bodyStyle.overflow = overflow;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ScrollBar, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ScrollBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ScrollBar, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -383,5 +1154,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ContentRef, FOCUSABLE_ELEMENTS_SELECTOR, PopupService, ScrollBar, closest, getActiveElement, getFocusableBoundaryElements, getValueInRange, hubCompleteTransition, hubFocusTrap, hubRunTransition, isDefined, isInteger, isNumber, isPromise, isString, padNumber, reflow, regExpEscape, removeAccents, runInZone, toInteger, toString };
+export { ContentRef, FOCUSABLE_ELEMENTS_SELECTOR, GetPipe, HUB_TRANSLATION_CONFIG, HubTranslationService, IsObjectPipe, IsObservablePipe, IsStringPipe, OverlayPosition, OverlayRef, OverlayService, PopupService, ScrollBar, TranslatePipe, UcfirstPipe, UnwrapAsyncPipe, closest, equals, getActiveElement, getFocusableBoundaryElements, getValue, getValueInRange, hubCompleteTransition, hubFocusTrap, hubRunTransition, interpolateString, isDefined, isInteger, isNumber, isPromise, isString, padNumber, reflow, regExpEscape, removeAccents, runInZone, toInteger, toString };
 //# sourceMappingURL=ng-hub-ui-utils.mjs.map