ng-primitives 0.82.0 → 0.84.0

package/fesm2022/ng-primitives-internal.mjs

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Injectable, Directive, Renderer2, signal, effect, untracked, Injector, DestroyRef, PLATFORM_ID, CSP_NONCE } from '@angular/core';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { safeTakeUntilDestroyed, onBooleanChange, isUndefined, injectDisposables } from 'ng-primitives/utils';
-import { isPlatformServer, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { inject, ElementRef, Injectable, Directive, effect, untracked, CSP_NONCE, PLATFORM_ID, signal, Injector, DestroyRef } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser, isPlatformServer } from '@angular/common';
+import { isUndefined, safeTakeUntilDestroyed } from 'ng-primitives/utils';
 import { Observable, merge } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -117,132 +116,6 @@ function setupExitAnimation({ element }) {
     };
 }
 
-function setupFocus({ focus, blur, focusWithin = false, disabled = signal(false), }) {
-    /**
-     * Access the element reference.
-     */
-    const elementRef = inject(ElementRef);
-    /**
-     * Access the focus monitor.
-     */
-    const focusMonitor = inject(FocusMonitor);
-    /**
-     * Access the renderer.
-     */
-    const renderer = inject(Renderer2);
-    /**
-     * Whether the element is currently focused.
-     */
-    const isFocused = signal(false);
-    focusMonitor
-        .monitor(elementRef, focusWithin)
-        .pipe(safeTakeUntilDestroyed())
-        .subscribe(focusOrigin => {
-        if (disabled()) {
-            return;
-        }
-        isFocused.set(focusOrigin !== null);
-        if (focusOrigin !== null) {
-            if (focus) {
-                focus();
-            }
-            renderer.setAttribute(elementRef.nativeElement, 'data-focus', '');
-        }
-        else {
-            if (blur) {
-                blur();
-            }
-            renderer.removeAttribute(elementRef.nativeElement, 'data-focus');
-        }
-    });
-    return { isFocused };
-}
-
-function setupFocusVisible({ focusChange, disabled = signal(false), }) {
-    const elementRef = inject(ElementRef);
-    const renderer = inject(Renderer2);
-    const focusMonitor = inject(FocusMonitor);
-    // Whether the element is currently focused.
-    const isFocused = signal(false);
-    // handle focus state
-    focusMonitor
-        .monitor(elementRef.nativeElement)
-        .pipe(safeTakeUntilDestroyed())
-        .subscribe(origin => 
-    // null indicates the element was blurred
-    origin === null ? onBlur() : onFocus(origin));
-    // if the component becomes disabled and it is focused, hide the focus
-    onBooleanChange(disabled, () => focus(false));
-    function onFocus(origin) {
-        if (disabled() || isFocused()) {
-            return;
-        }
-        // for some elements the focus visible state should always appear on focus
-        if (alwaysShowFocus()) {
-            focus(true);
-            return;
-        }
-        // if the focus origin is keyboard or program(focused programmatically), then the focus is visible
-        if (origin === 'keyboard') {
-            focus(true);
-            return;
-        }
-    }
-    function onBlur() {
-        if (disabled() || !isFocused()) {
-            return;
-        }
-        focus(false);
-    }
-    /**
-     * Trigger the focus signal along with the focusChange event.
-     */
-    function focus(value) {
-        if (isFocused() === value) {
-            return;
-        }
-        isFocused.set(value);
-        focusChange?.(value);
-        if (value) {
-            renderer.setAttribute(elementRef.nativeElement, 'data-focus-visible', '');
-        }
-        else {
-            renderer.removeAttribute(elementRef.nativeElement, 'data-focus-visible');
-        }
-    }
-    function alwaysShowFocus() {
-        const nonTextInputTypes = [
-            'checkbox',
-            'radio',
-            'range',
-            'color',
-            'file',
-            'image',
-            'button',
-            'submit',
-            'reset',
-        ];
-        // if this is an input element and it is a text input
-        if (elementRef.nativeElement instanceof HTMLInputElement &&
-            !nonTextInputTypes.includes(elementRef.nativeElement.type)) {
-            return true;
-        }
-        // if this is a textarea
-        if (elementRef.nativeElement instanceof HTMLTextAreaElement) {
-            return true;
-        }
-        // if this is an element with contenteditable
-        if (elementRef.nativeElement.isContentEditable ||
-            elementRef.nativeElement.hasAttribute('contenteditable')) {
-            return true;
-        }
-        return false;
-    }
-    return {
-        isFocused,
-    };
-}
-
 /**
  * This implementation is heavily inspired by the great work on ngextension!
  * https://github.com/ngxtension/ngxtension-platform/blob/main/libs/ngxtension/explicit-effect/src/explicit-effect.ts
@@ -260,6 +133,89 @@ function explicitEffect(deps, fn, options) {
     }, options);
 }
 
+/**
+ * A utility service for injecting styles into the document.
+ * Angular doesn't allow directives to specify styles, only components.
+ * As we ship directives, occasionally we need to associate styles with them.
+ * This service allows us to programmatically inject styles into the document.
+ */
+class StyleInjector {
+    constructor() {
+        /**
+         * Access the CSP nonce
+         */
+        this.cspNonce = inject(CSP_NONCE, { optional: true });
+        /**
+         * Access the document.
+         */
+        this.document = inject(DOCUMENT);
+        /**
+         * Detect the platform.
+         */
+        this.platformId = inject(PLATFORM_ID);
+        /**
+         * Store the map of style elements with their unique identifiers.
+         */
+        this.styleElements = new Map();
+        if (isPlatformBrowser(this.platformId)) {
+            this.collectServerStyles();
+        }
+    }
+    /**
+     * Inject a style into the document.
+     * @param id The unique identifier for the style.
+     * @param style The style to inject.
+     */
+    add(id, style) {
+        if (this.styleElements.has(id)) {
+            return;
+        }
+        const styleElement = this.document.createElement('style');
+        styleElement.setAttribute('data-ngp-style', id);
+        styleElement.textContent = style;
+        // If a CSP nonce is provided, set it on the style element
+        if (this.cspNonce) {
+            styleElement.setAttribute('nonce', this.cspNonce);
+        }
+        this.document.head.appendChild(styleElement);
+        this.styleElements.set(id, styleElement);
+    }
+    /**
+     * Remove a style from the document.
+     * @param id The unique identifier for the style.
+     */
+    remove(id) {
+        const styleElement = this.styleElements.get(id);
+        if (styleElement) {
+            this.document.head.removeChild(styleElement);
+            this.styleElements.delete(id);
+        }
+    }
+    /**
+     * Collect any styles that were rendered by the server.
+     */
+    collectServerStyles() {
+        const styleElements = this.document.querySelectorAll('style[data-ngp-style]');
+        styleElements.forEach(styleElement => {
+            const id = styleElement.getAttribute('data-ngp-style');
+            if (id) {
+                this.styleElements.set(id, styleElement);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StyleInjector, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StyleInjector, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StyleInjector, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+function injectStyleInjector() {
+    return inject(StyleInjector);
+}
+
 /**
  * A simple helper function to create a resize observer as an RxJS Observable.
  * @param element The element to observe for resize events.
@@ -373,302 +329,6 @@ function onDomRemoval(element, callback) {
     });
 }
 
-/**
- * We use a service here as this value is a singleton
- * and allows us to register the dom events once.
- */
-class GlobalPointerEvents {
-    constructor() {
-        /**
-         * Whether global mouse events should be ignored.
-         */
-        this.ignoreEmulatedMouseEvents = false;
-        /**
-         * Access the document.
-         */
-        this.document = inject(DOCUMENT);
-        /**
-         * Determine the platform id.
-         */
-        this.platformId = inject(PLATFORM_ID);
-        // we only want to setup events on the client
-        if (isPlatformBrowser(this.platformId)) {
-            this.setupGlobalTouchEvents();
-        }
-    }
-    setupGlobalTouchEvents() {
-        this.document.addEventListener('pointerup', this.handleGlobalPointerEvent.bind(this));
-        this.document.addEventListener('touchend', this.setGlobalIgnoreEmulatedMouseEvents.bind(this));
-    }
-    setGlobalIgnoreEmulatedMouseEvents() {
-        this.ignoreEmulatedMouseEvents = true;
-        // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter
-        // with pointerType="mouse" immediately after onPointerUp and before onFocus. On other
-        // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in
-        // the distant future because a user previously touched the element.
-        setTimeout(() => (this.ignoreEmulatedMouseEvents = false), 50);
-    }
-    handleGlobalPointerEvent(event) {
-        if (event.pointerType === 'touch') {
-            this.setGlobalIgnoreEmulatedMouseEvents();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalPointerEvents, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalPointerEvents, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalPointerEvents, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-/**
- * Programatically add the hover functionality to an element.
- * This is useful in cases where we can't necessarily use a HostDirective,
- * because there is a chance the directive has already been used.
- */
-function setupHover({ hoverStart, hoverEnd, disabled = signal(false), }) {
-    /**
-     * Access the element.
-     */
-    const elementRef = inject(ElementRef);
-    /**
-     * Access the global pointer events handler.
-     */
-    const globalPointerEvents = inject(GlobalPointerEvents);
-    /**
-     * Access the disposable helper.
-     */
-    const disposables = injectDisposables();
-    /**
-     * Store the current hover state.
-     */
-    const hovered = signal(false);
-    /**
-     * Whether this element should ignore emulated mouse events.
-     */
-    let ignoreEmulatedMouseEvents = false;
-    /**
-     * Setup event listeners.
-     */
-    disposables.addEventListener(elementRef.nativeElement, 'pointerenter', onPointerEnter);
-    disposables.addEventListener(elementRef.nativeElement, 'pointerleave', onPointerLeave);
-    disposables.addEventListener(elementRef.nativeElement, 'touchstart', onTouchStart);
-    disposables.addEventListener(elementRef.nativeElement, 'mouseenter', onMouseEnter);
-    disposables.addEventListener(elementRef.nativeElement, 'mouseleave', onMouseLeave);
-    // anytime the disabled state changes to true, we must reset the hover state
-    if (disabled) {
-        onBooleanChange(disabled, reset);
-    }
-    // if the element is removed from the dom, we want to reset the hover state
-    onDomRemoval(elementRef.nativeElement, reset);
-    // anytime the hover state changes we want to update the attribute
-    effect(() => hovered()
-        ? elementRef.nativeElement.setAttribute('data-hover', '')
-        : elementRef.nativeElement.removeAttribute('data-hover'));
-    /**
-     * Reset the hover state.
-     */
-    function reset() {
-        onHoverEnd('mouse');
-    }
-    /**
-     * Trigger the hover start events.
-     * @param event
-     * @param pointerType
-     */
-    function onHoverStart(event, pointerType) {
-        if (disabled() ||
-            pointerType === 'touch' ||
-            hovered() ||
-            !event.currentTarget?.contains(event.target)) {
-            return;
-        }
-        hovered.set(true);
-        hoverStart?.();
-    }
-    /**
-     * Trigger the hover end events.
-     * @param pointerType
-     */
-    function onHoverEnd(pointerType) {
-        if (pointerType === 'touch' || !hovered()) {
-            return;
-        }
-        hovered.set(false);
-        hoverEnd?.();
-    }
-    function onPointerEnter(event) {
-        if (globalPointerEvents.ignoreEmulatedMouseEvents && event.pointerType === 'mouse') {
-            return;
-        }
-        onHoverStart(event, event.pointerType);
-    }
-    function onPointerLeave(event) {
-        if (!disabled() && event.currentTarget?.contains(event.target)) {
-            onHoverEnd(event.pointerType);
-        }
-    }
-    function onTouchStart() {
-        ignoreEmulatedMouseEvents = true;
-    }
-    function onMouseEnter(event) {
-        if (!ignoreEmulatedMouseEvents && !globalPointerEvents.ignoreEmulatedMouseEvents) {
-            onHoverStart(event, 'mouse');
-        }
-        ignoreEmulatedMouseEvents = false;
-    }
-    function onMouseLeave(event) {
-        if (!disabled() && event.currentTarget?.contains(event.target)) {
-            onHoverEnd('mouse');
-        }
-    }
-    return { hovered };
-}
-
-function setupPress({ pressStart, pressEnd, disabled = signal(false), }) {
-    const elementRef = inject(ElementRef);
-    const disposables = injectDisposables();
-    /**
-     * Whether the element is currently pressed.
-     */
-    const pressed = signal(false);
-    // setup event listeners
-    disposables.addEventListener(elementRef.nativeElement, 'pointerdown', onPointerDown);
-    // anytime the press state changes we want to update the attribute
-    effect(() => pressed() && !disabled()
-        ? elementRef.nativeElement.setAttribute('data-press', '')
-        : elementRef.nativeElement.removeAttribute('data-press'));
-    /**
-     * Reset the press state.
-     */
-    function reset() {
-        // if we are not pressing, then do nothing
-        if (!pressed()) {
-            return;
-        }
-        // clear any existing disposables
-        disposableListeners.forEach(dispose => dispose());
-        pressed.set(false);
-        pressEnd?.();
-    }
-    /**
-     * Store the list of disposables.
-     */
-    let disposableListeners = [];
-    function onPointerDown() {
-        if (disabled()) {
-            return;
-        }
-        // clear any existing disposables
-        disposableListeners.forEach(dispose => dispose());
-        // update the press state
-        pressed.set(true);
-        pressStart?.();
-        // setup global event listeners to catch events on elements outside the directive
-        const ownerDocument = elementRef.nativeElement.ownerDocument ?? document;
-        // if the pointer up event happens on any elements, then we are no longer pressing on this element
-        const pointerUp = disposables.addEventListener(ownerDocument, 'pointerup', () => reset(), false);
-        // Instead of relying on the `pointerleave` event, which is not consistently called on iOS Safari,
-        // we use the `pointermove` event to determine if we are still "pressing".
-        // By checking if the target is still within the element, we can determine if the press is ongoing.
-        const pointerMove = disposables.addEventListener(ownerDocument, 'pointermove', () => onPointerMove, false);
-        // if the pointer is cancelled, then we are no longer pressing on this element
-        const pointerCancel = disposables.addEventListener(ownerDocument, 'pointercancel', () => reset(), false);
-        disposableListeners = [pointerUp, pointerMove, pointerCancel];
-    }
-    function onPointerMove(event) {
-        if (elementRef.nativeElement !== event.target &&
-            !elementRef.nativeElement.contains(event.target)) {
-            reset();
-        }
-    }
-    return { pressed };
-}
-
-/**
- * A utility service for injecting styles into the document.
- * Angular doesn't allow directives to specify styles, only components.
- * As we ship directives, occasionally we need to associate styles with them.
- * This service allows us to programmatically inject styles into the document.
- */
-class StyleInjector {
-    constructor() {
-        /**
-         * Access the CSP nonce
-         */
-        this.cspNonce = inject(CSP_NONCE, { optional: true });
-        /**
-         * Access the document.
-         */
-        this.document = inject(DOCUMENT);
-        /**
-         * Detect the platform.
-         */
-        this.platformId = inject(PLATFORM_ID);
-        /**
-         * Store the map of style elements with their unique identifiers.
-         */
-        this.styleElements = new Map();
-        if (isPlatformBrowser(this.platformId)) {
-            this.collectServerStyles();
-        }
-    }
-    /**
-     * Inject a style into the document.
-     * @param id The unique identifier for the style.
-     * @param style The style to inject.
-     */
-    add(id, style) {
-        if (this.styleElements.has(id)) {
-            return;
-        }
-        const styleElement = this.document.createElement('style');
-        styleElement.setAttribute('data-ngp-style', id);
-        styleElement.textContent = style;
-        // If a CSP nonce is provided, set it on the style element
-        if (this.cspNonce) {
-            styleElement.setAttribute('nonce', this.cspNonce);
-        }
-        this.document.head.appendChild(styleElement);
-        this.styleElements.set(id, styleElement);
-    }
-    /**
-     * Remove a style from the document.
-     * @param id The unique identifier for the style.
-     */
-    remove(id) {
-        const styleElement = this.styleElements.get(id);
-        if (styleElement) {
-            this.document.head.removeChild(styleElement);
-            this.styleElements.delete(id);
-        }
-    }
-    /**
-     * Collect any styles that were rendered by the server.
-     */
-    collectServerStyles() {
-        const styleElements = this.document.querySelectorAll('style[data-ngp-style]');
-        styleElements.forEach(styleElement => {
-            const id = styleElement.getAttribute('data-ngp-style');
-            if (id) {
-                this.styleElements.set(id, styleElement);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StyleInjector, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StyleInjector, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StyleInjector, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-function injectStyleInjector() {
-    return inject(StyleInjector);
-}
-
 /**
  * This function sets up a mutation observer to listen for changes in the DOM.
  * It will stop listening when the `disabled` signal is true, and re-enable when it is false.
@@ -740,5 +400,5 @@ function scrollIntoViewIfNeeded(element) {
  * Generated bundle index. Do not edit.
  */
 
-export { NgpExitAnimation, NgpExitAnimationManager, StyleInjector, explicitEffect, fromMutationObserver, fromResizeEvent, injectDimensions, injectElementRef, injectExitAnimationManager, injectStyleInjector, observeResize, onDomRemoval, provideExitAnimationManager, scrollIntoViewIfNeeded, setupExitAnimation, setupFocus, setupFocusVisible, setupHover, setupOverflowListener, setupPress };
+export { NgpExitAnimation, NgpExitAnimationManager, StyleInjector, explicitEffect, fromMutationObserver, fromResizeEvent, injectDimensions, injectElementRef, injectExitAnimationManager, injectStyleInjector, observeResize, onDomRemoval, provideExitAnimationManager, scrollIntoViewIfNeeded, setupExitAnimation, setupOverflowListener };
 //# sourceMappingURL=ng-primitives-internal.mjs.map