ng-primitives 0.60.0 → 0.62.0

package/fesm2022/ng-primitives-toast.mjs

@@ -1,14 +1,23 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, ViewContainerRef, Injector, input, numberAttribute, booleanAttribute, Directive } from '@angular/core';
-import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
-import { DOCUMENT } from '@angular/common';
+import { InjectionToken, inject, ApplicationRef, RendererFactory2, Injector, signal, ViewContainerRef, computed, Injectable, afterNextRender, HostListener, Directive } from '@angular/core';
+import { InteractivityChecker } from '@angular/cdk/a11y';
+import { explicitEffect } from 'ng-primitives/internal';
+import { injectDimensions } from 'ng-primitives/utils';
+import { createPortal } from 'ng-primitives/portal';
 
 const defaultToastConfig = {
-    gap: 16,
+    gap: 14,
     duration: 3000,
-    gravity: 'top',
-    position: 'end',
-    stopOnHover: true,
+    width: 360,
+    offsetTop: 24,
+    offsetBottom: 24,
+    offsetLeft: 24,
+    offsetRight: 24,
+    swipeThreshold: 45,
+    swipeDirections: ['left', 'right', 'top', 'bottom'],
+    dismissible: true,
+    maxToasts: 3,
+    zIndex: 9999999,
     ariaLive: 'polite',
 };
 const NgpToastConfigToken = new InjectionToken('NgpToastConfigToken');
@@ -33,209 +42,445 @@ function injectToastConfig() {
     return inject(NgpToastConfigToken, { optional: true }) ?? defaultToastConfig;
 }
 
-class NgpToastRef {
-    /** Get the toast height */
-    get height() {
-        return this.toastElement.offsetHeight;
-    }
-    constructor(
-    /** Store the toast element */
-    toastElement, 
-    /** Store the duration */
-    duration, 
-    /** The position of the toast */
-    position, 
-    /** The gravity of the toast */
-    gravity, 
-    /** Whether we should stop on focus */
-    stopOnHover, 
-    /** The aria live setting */
-    ariaLive, onDismiss) {
-        this.toastElement = toastElement;
-        this.duration = duration;
-        this.position = position;
-        this.gravity = gravity;
-        this.stopOnHover = stopOnHover;
-        this.ariaLive = ariaLive;
-        this.onDismiss = onDismiss;
-        /** Store the current timeout */
-        this.timeoutId = null;
-        this.toastElement.setAttribute('data-toast', 'visible');
-        this.setPosition(position);
-        this.setGravity(gravity);
-        this.setAriaLive(ariaLive);
-        this.setupTimeouts();
-        this.setupListeners();
+const NgpToastContext = new InjectionToken('NgpToastContext');
+function provideToastContext(context) {
+    return { provide: NgpToastContext, useValue: context };
+}
+function injectToastContext() {
+    return inject(NgpToastContext);
+}
+
+const NgpToastOptions = new InjectionToken('NgpToastOptions');
+function provideToastOptions(context) {
+    return { provide: NgpToastOptions, useValue: context };
+}
+function injectToastOptions() {
+    return inject(NgpToastOptions);
+}
+
+class NgpToastManager {
+    constructor() {
+        this.config = injectToastConfig();
+        this.applicationRef = inject(ApplicationRef);
+        this.rendererFactory = inject(RendererFactory2);
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+        this.injector = inject(Injector);
+        // Map to store containers by placement
+        this.containers = new Map();
+        this.toasts = signal([]);
+        /** Signal that tracks which placements are expanded */
+        this.expanded = signal([]);
     }
-    dismiss() {
-        // determine if there is a transition on the element
-        const transitionDuration = parseFloat(getComputedStyle(this.toastElement).transitionDuration);
-        // if there is no transition, dismiss immediately
-        if (transitionDuration === 0) {
-            this.removeElement();
-            return;
+    /** Show a toast notification */
+    show(toast, options = {}) {
+        // services can't access the view container directly, so this is a workaround
+        const viewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef);
+        let instance = null;
+        const placement = options.placement ?? 'top-end';
+        const container = this.getOrCreateContainer(placement);
+        const portal = createPortal(toast, viewContainerRef, Injector.create({
+            parent: this.injector,
+            providers: [
+                provideToastContext(options.context),
+                provideToastOptions({
+                    placement,
+                    duration: options.duration ?? 5000,
+                    register: (toast) => (instance = toast),
+                    expanded: computed(() => this.expanded().includes(placement)),
+                    dismissible: options.dismissible ?? this.config.dismissible,
+                    swipeDirections: options.swipeDirections ?? this.config.swipeDirections,
+                }),
+            ],
+        }), {
+            // Hide the toast when the dismiss method is called
+            dismiss: () => this.dismiss(instance),
+            context: options.context,
+        });
+        portal.attach(container);
+        // Add the toast to the list of toasts
+        if (!instance) {
+            throw new Error('A toast must have the NgpToast directive applied.');
         }
-        // wait for the transition to end
-        this.toastElement.addEventListener('transitionend', () => this.removeElement());
-        this.toastElement.setAttribute('data-toast', 'hidden');
-    }
-    removeElement() {
-        this.toastElement.parentNode?.removeChild(this.toastElement);
-        this.onDismiss();
+        this.toasts.update(toasts => [{ instance: instance, portal }, ...toasts]);
+        return {
+            dismiss: () => this.dismiss(instance),
+        };
     }
-    /** Setup duration timeouts */
-    setupTimeouts() {
-        // if the duration is 0 skip
-        if (this.duration === 0) {
-            return;
+    /** Hide a toast notification */
+    async dismiss(toast) {
+        const ref = this.toasts().find(t => t.instance === toast);
+        if (ref) {
+            // Detach the portal from the container
+            await ref.portal.detach();
+            // Remove the toast from the list of toasts
+            this.toasts.update(toasts => toasts.filter(t => t !== ref));
+            // if there are no more toasts, ensure the container is no longer considered expanded
+            if (this.toasts().length === 0) {
+                this.expanded.update(expanded => expanded.filter(p => p !== toast.context.placement));
+            }
         }
-        this.timeoutId = window.setTimeout(() => this.dismiss(), this.duration);
     }
-    setupListeners() {
-        if (!this.stopOnHover) {
-            return;
+    /**
+     * Lazily create or get a container for a given placement.
+     */
+    getOrCreateContainer(placement) {
+        if (this.containers.has(placement)) {
+            return this.containers.get(placement);
         }
-        // setup event listeners if we should stop on focus
-        this.toastElement.addEventListener('mouseover', () => {
-            window.clearTimeout(this.timeoutId);
-            this.timeoutId = null;
+        const container = this.createContainer(placement);
+        this.containers.set(placement, container);
+        return container;
+    }
+    /**
+     * Create a section in which toasts will be rendered for a specific placement.
+     */
+    createContainer(placement) {
+        const container = this.renderer.createElement('section');
+        this.renderer.setAttribute(container, 'aria-live', this.config.ariaLive);
+        this.renderer.setAttribute(container, 'aria-atomic', 'false');
+        this.renderer.setAttribute(container, 'tabindex', '-1');
+        this.renderer.setAttribute(container, 'data-ngp-toast-container', placement);
+        container.style.setProperty('position', 'fixed');
+        container.style.setProperty('z-index', `${this.config.zIndex}`);
+        container.style.setProperty('width', `${this.config.width}px`);
+        container.style.setProperty('--ngp-toast-offset-top', `${this.config.offsetTop}px`);
+        container.style.setProperty('--ngp-toast-offset-bottom', `${this.config.offsetBottom}px`);
+        container.style.setProperty('--ngp-toast-offset-left', `${this.config.offsetLeft}px`);
+        container.style.setProperty('--ngp-toast-offset-right', `${this.config.offsetRight}px`);
+        container.style.setProperty('--ngp-toast-gap', `${this.config.gap}px`);
+        container.style.setProperty('--ngp-toast-width', `${this.config.width}px`);
+        // mark the container as expanded
+        this.renderer.listen(container, 'mouseenter', () => this.expanded.update(expanded => [...expanded, placement]));
+        this.renderer.listen(container, 'mouseleave', () => {
+            this.expanded.update(expanded => expanded.filter(p => p !== placement));
         });
-        this.toastElement.addEventListener('mouseleave', () => this.setupTimeouts());
+        // Set placement styles
+        switch (placement) {
+            case 'top-start':
+                container.style.setProperty('top', `${this.config.offsetTop}px`);
+                container.style.setProperty('left', `${this.config.offsetLeft}px`);
+                break;
+            case 'top-center':
+                container.style.setProperty('top', '0');
+                container.style.setProperty('left', '50%');
+                container.style.setProperty('transform', 'translateX(-50%)');
+                break;
+            case 'top-end':
+                container.style.setProperty('top', `${this.config.offsetTop}px`);
+                container.style.setProperty('right', `${this.config.offsetRight}px`);
+                break;
+            case 'bottom-start':
+                container.style.setProperty('bottom', `${this.config.offsetBottom}px`);
+                container.style.setProperty('left', `${this.config.offsetLeft}px`);
+                break;
+            case 'bottom-center':
+                container.style.setProperty('bottom', '0');
+                container.style.setProperty('left', '50%');
+                container.style.setProperty('transform', 'translateX(-50%)');
+                break;
+            case 'bottom-end':
+                container.style.setProperty('bottom', `${this.config.offsetBottom}px`);
+                container.style.setProperty('right', `${this.config.offsetRight}px`);
+                break;
+            default:
+                throw new Error(`Unknown toast placement: ${placement}`);
+        }
+        this.renderer.appendChild(document.body, container);
+        return container;
     }
-    /** Set the position attribute */
-    setPosition(position) {
-        this.toastElement.setAttribute('data-position', position);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToastManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToastManager, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToastManager, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class NgpToastTimer {
+    constructor(duration, callback) {
+        this.duration = duration;
+        this.callback = callback;
+        this.startTime = null;
+        this.timeoutId = null;
+        this.isRunning = false;
+        this.remaining = duration;
     }
-    /** Set the gravity attribute */
-    setGravity(gravity) {
-        this.toastElement.setAttribute('data-gravity', gravity);
+    start() {
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        this.startTime = Date.now();
+        this.timeoutId = setTimeout(() => {
+            this.isRunning = false;
+            this.callback();
+        }, this.remaining);
     }
-    /** Set the aria live attribute */
-    setAriaLive(ariaLive) {
-        this.toastElement.setAttribute('aria-live', ariaLive);
+    pause() {
+        if (!this.isRunning || this.startTime === null)
+            return;
+        this.isRunning = false;
+        clearTimeout(this.timeoutId);
+        const elapsed = Date.now() - this.startTime;
+        this.remaining -= elapsed;
+        this.startTime = null;
+        this.timeoutId = null;
     }
-    /**
-     * @internal
-     */
-    setInset(property, value) {
-        this.toastElement.style[property] = value;
+    stop() {
+        this.isRunning = false;
+        clearTimeout(this.timeoutId);
+        this.timeoutId = null;
+        this.startTime = null;
+        this.remaining = this.duration;
     }
 }
+function toastTimer(duration, callback) {
+    return new NgpToastTimer(duration, callback);
+}
 
 class NgpToast {
     constructor() {
-        this.config = injectToastConfig();
-        /** Access the ng-template */
-        this.template = inject(TemplateRef);
-        /** Access the view container */
-        this.viewContainer = inject(ViewContainerRef);
-        /** Access the injector */
+        this.manager = inject(NgpToastManager);
         this.injector = inject(Injector);
-        /** Access the document */
-        this.document = inject(DOCUMENT);
+        this.config = injectToastConfig();
+        /** @internal */
+        this.context = injectToastOptions();
+        this.interactivityChecker = inject(InteractivityChecker);
+        this.isInteracting = signal(false);
+        this.pointerStartRef = null;
+        this.dragStartTime = null;
+        this.swiping = signal(false);
+        this.swipeDirection = signal(null);
+        this.swipeAmount = signal({ x: 0, y: 0 });
+        this.swipeOutDirection = computed(() => {
+            const direction = this.swipeDirection();
+            if (direction === 'x') {
+                return this.swipeAmount().x > 0 ? 'right' : 'left';
+            }
+            else if (direction === 'y') {
+                return this.swipeAmount().y > 0 ? 'bottom' : 'top';
+            }
+            return null;
+        });
+        /**
+         * Get all toasts that are currently being displayed in the same position.
+         */
+        this.toasts = computed(() => this.manager
+            .toasts()
+            .filter(toast => toast.instance.context.placement === this.context.placement));
         /**
-         * The duration the toast will display for before it is automatically dismissed in milliseconds.
-         * @default 3000
+         * The number of toasts that are currently being displayed before this toast.
          */
-        this.duration = input(this.config.duration, {
-            alias: 'ngpToastDuration',
-            transform: numberAttribute,
+        this.index = computed(() => {
+            return this.toasts().findIndex(toast => toast.instance === this);
         });
         /**
-         * The direction the toast will appear from.
-         * @default 'top'
+         * Determine the position of the toast in the list of toasts.
+         * This is the combination of the heights of all the toasts before this one, plus the gap between them.
          */
-        this.gravity = input(this.config.gravity, {
-            alias: 'ngpToastGravity',
+        this.offset = computed(() => {
+            const gap = this.config.gap;
+            return this.toasts()
+                .slice(0, this.index())
+                .reduce((acc, toast) => acc + toast.instance.dimensions().height + gap, 0);
         });
         /**
-         * The position the toast will on the horizontal axis.
-         * @default 'end'
+         * Determine if this toast is visible.
+         * Visible considers the maximum number of toasts that can be displayed at once, and the last x toasts that are currently being displayed.
          */
-        this.position = input(this.config.position, {
-            alias: 'ngpToastPosition',
+        this.visible = computed(() => {
+            const maxToasts = this.config.maxToasts;
+            // determine if this toast is within the maximum number of toasts that can be displayed
+            return this.index() < maxToasts || this.toasts().length <= maxToasts;
         });
         /**
-         * Whether the automatic dismissal of the toast should be paused when the user hovers over it.
-         * @default true
+         * Determine the height of the front toast.
+         * This is used to determine the height of the toast when it is not expanded.
          */
-        this.stopOnHover = input(this.config.stopOnHover, {
-            alias: 'ngpToastStopOnHover',
-            transform: booleanAttribute,
+        this.frontToastHeight = computed(() => {
+            // get the first toast in the list with height - as when a new toast is added, it may not initially have dimensions
+            return (this.toasts()
+                .find(toast => toast.instance.dimensions().height)
+                ?.instance.dimensions().height || 0);
         });
         /**
-         * Whether the toast should be announced to assistive technologies.
-         * @default 'polite'
+         * Determine the z-index of the toast. This is the inverse of the index.
+         * The first toast will have the highest z-index, and the last toast will have the lowest z-index.
+         * This is used to ensure that the first toast is always on top of the others.
+         */
+        this.zIndex = computed(() => this.toasts().length - this.index());
+        /**
+         * The height of the toast in pixels.
+         */
+        this.dimensions = injectDimensions();
+        /**
+         * The x position of the toast.
          */
-        this.ariaLive = input(this.config.ariaLive, {
-            alias: 'ngpToastAriaLive',
+        this.x = this.context.placement.split('-')[1] || 'end';
+        /**
+         * The y position of the toast.
+         */
+        this.y = this.context.placement.split('-')[0] || 'top';
+        /**
+         * The toast timer instance.
+         */
+        this.timer = toastTimer(this.config.duration, () => this.manager.dismiss(this));
+        this.context.register(this);
+        // Start the timer when the toast is created
+        this.timer.start();
+        // Pause the timer when the toast is expanded or when the user is interacting with it
+        explicitEffect([this.context.expanded, this.isInteracting], ([expanded, interacting]) => {
+            // If the toast is expanded, or if the user is interacting with it, reset the timer
+            if (expanded || interacting) {
+                this.timer.pause();
+            }
+            else {
+                this.timer.start();
+            }
         });
     }
-    /** Store the list of toasts */
-    static { this.toasts = []; }
-    /** Show the toast. */
-    show() {
-        this.createToast();
-        this.reposition();
-    }
-    /** Build the toast */
-    createToast() {
-        const portal = new TemplatePortal(this.template, this.viewContainer, {
-            dismiss: () => toastRef.dismiss(),
-        }, this.injector);
-        const domOutlet = new DomPortalOutlet(this.document.body, undefined, undefined, Injector.create({
-            parent: this.injector,
-            providers: [],
-        }));
-        const viewRef = domOutlet.attach(portal);
-        viewRef.detectChanges();
-        const toastElement = viewRef.rootNodes[0];
-        const toastRef = new NgpToastRef(toastElement, this.duration(), this.position(), this.gravity(), this.stopOnHover(), this.ariaLive(), () => {
-            NgpToast.toasts = NgpToast.toasts.filter(t => t !== toastRef);
-            this.reposition();
-        });
-        NgpToast.toasts = [...NgpToast.toasts, toastRef];
+    onPointerDown(event) {
+        // right click should not trigger swipe and we check if the toast is dismissible
+        if (event.button === 2 || !this.context.dismissible) {
+            return;
+        }
+        this.isInteracting.set(true);
+        // we need to check if the pointer is on an interactive element, if so, we should not start swiping
+        if (this.interactivityChecker.isFocusable(event.target)) {
+            return;
+        }
+        this.dragStartTime = new Date();
+        // Ensure we maintain correct pointer capture even when going outside of the toast (e.g. when swiping)
+        event.target.setPointerCapture(event.pointerId);
+        this.swiping.set(true);
+        this.pointerStartRef = { x: event.clientX, y: event.clientY };
     }
-    /** Position the toast on the DOM */
-    reposition() {
-        const topStartOffsetSize = {
-            top: this.config.gap,
-            bottom: this.config.gap,
-        };
-        const topEndOffsetSize = {
-            top: this.config.gap,
-            bottom: this.config.gap,
+    onPointerMove(event) {
+        if (!this.pointerStartRef || !this.context.dismissible) {
+            return;
+        }
+        const isHighlighted = window.getSelection()?.toString().length ?? 0 > 0;
+        if (isHighlighted) {
+            return;
+        }
+        const yDelta = event.clientY - this.pointerStartRef.y;
+        const xDelta = event.clientX - this.pointerStartRef.x;
+        const swipeDirections = this.context.swipeDirections;
+        // Determine swipe direction if not already locked
+        if (!this.swipeDirection() && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {
+            this.swipeDirection.set(Math.abs(xDelta) > Math.abs(yDelta) ? 'x' : 'y');
+        }
+        const swipeAmount = { x: 0, y: 0 };
+        const getDampening = (delta) => {
+            const factor = Math.abs(delta) / 20;
+            return 1 / (1.5 + factor);
         };
-        let position;
-        // update the position of the toasts
-        for (const toast of NgpToast.toasts) {
-            // Getting the applied gravity
-            position = toast.gravity;
-            const height = toast.height;
-            if (toast.position === 'start') {
-                toast.setInset(position, `${topStartOffsetSize[position]}px`);
-                topStartOffsetSize[position] += height + this.config.gap;
+        // Only apply swipe in the locked direction
+        if (this.swipeDirection() === 'y') {
+            // Handle vertical swipes
+            if (swipeDirections.includes('top') || swipeDirections.includes('bottom')) {
+                if ((swipeDirections.includes('top') && yDelta < 0) ||
+                    (swipeDirections.includes('bottom') && yDelta > 0)) {
+                    swipeAmount.y = yDelta;
+                }
+                else {
+                    // Smoothly transition to dampened movement
+                    const dampenedDelta = yDelta * getDampening(yDelta);
+                    // Ensure we don't jump when transitioning to dampened movement
+                    swipeAmount.y = Math.abs(dampenedDelta) < Math.abs(yDelta) ? dampenedDelta : yDelta;
+                }
             }
-            else {
-                toast.setInset(position, `${topEndOffsetSize[position]}px`);
-                topEndOffsetSize[position] += height + this.config.gap;
+        }
+        else if (this.swipeDirection() === 'x') {
+            // Handle horizontal swipes
+            if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
+                if ((swipeDirections.includes('left') && xDelta < 0) ||
+                    (swipeDirections.includes('right') && xDelta > 0)) {
+                    swipeAmount.x = xDelta;
+                }
+                else {
+                    // Smoothly transition to dampened movement
+                    const dampenedDelta = xDelta * getDampening(xDelta);
+                    // Ensure we don't jump when transitioning to dampened movement
+                    swipeAmount.x = Math.abs(dampenedDelta) < Math.abs(xDelta) ? dampenedDelta : xDelta;
+                }
             }
         }
+        this.swipeAmount.set({ x: swipeAmount.x, y: swipeAmount.y });
+        if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) {
+            this.swiping.set(true);
+        }
+    }
+    onPointerUp() {
+        this.isInteracting.set(false);
+        if (!this.config.dismissible ||
+            !this.pointerStartRef ||
+            !this.swiping() ||
+            !this.dragStartTime) {
+            return;
+        }
+        this.pointerStartRef = null;
+        const swipeAmountX = this.swipeAmount().x;
+        const swipeAmountY = this.swipeAmount().y;
+        const timeTaken = new Date().getTime() - this.dragStartTime.getTime();
+        const swipeAmount = this.swipeDirection() === 'x' ? swipeAmountX : swipeAmountY;
+        const velocity = Math.abs(swipeAmount) / timeTaken;
+        if (Math.abs(swipeAmount) >= this.config.swipeThreshold || velocity > 0.11) {
+            afterNextRender({ write: () => this.manager.dismiss(this) }, { injector: this.injector });
+            return;
+        }
+        else {
+            this.swipeAmount.set({ x: 0, y: 0 });
+        }
+        // Reset swipe state
+        this.swipeDirection.set(null);
+        this.swiping.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToast, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpToast, isStandalone: true, selector: "[ngpToast]", inputs: { duration: { classPropertyName: "duration", publicName: "ngpToastDuration", isSignal: true, isRequired: false, transformFunction: null }, gravity: { classPropertyName: "gravity", publicName: "ngpToastGravity", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "ngpToastPosition", isSignal: true, isRequired: false, transformFunction: null }, stopOnHover: { classPropertyName: "stopOnHover", publicName: "ngpToastStopOnHover", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ngpToastAriaLive", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpToast"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpToast, isStandalone: true, selector: "[ngpToast]", host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()" }, properties: { "attr.data-position-x": "x", "attr.data-position-y": "y", "attr.data-visible": "visible()", "attr.data-front": "index() === 0", "attr.data-swiping": "swiping()", "attr.data-swipe-direction": "swipeOutDirection()", "attr.data-expanded": "context.expanded()", "style.--ngp-toast-gap.px": "config.gap", "style.--ngp-toast-z-index": "zIndex()", "style.--ngp-toasts-before": "index()", "style.--ngp-toast-index": "index() + 1", "style.--ngp-toast-width.px": "config.width", "style.--ngp-toast-height.px": "dimensions().height", "style.--ngp-toast-offset.px": "offset()", "style.--ngp-toast-front-height.px": "frontToastHeight()", "style.--ngp-toast-swipe-amount-x.px": "swipeAmount().x", "style.--ngp-toast-swipe-amount-y.px": "swipeAmount().y", "style.--ngp-toast-swipe-x": "swipeAmount().x", "style.--ngp-toast-swipe-y": "swipeAmount().y" } }, exportAs: ["ngpToast"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToast, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpToast]',
                     exportAs: 'ngpToast',
+                    host: {
+                        '[attr.data-position-x]': 'x',
+                        '[attr.data-position-y]': 'y',
+                        '[attr.data-visible]': 'visible()',
+                        '[attr.data-front]': 'index() === 0',
+                        '[attr.data-swiping]': 'swiping()',
+                        '[attr.data-swipe-direction]': 'swipeOutDirection()',
+                        '[attr.data-expanded]': 'context.expanded()',
+                        '[style.--ngp-toast-gap.px]': 'config.gap',
+                        '[style.--ngp-toast-z-index]': 'zIndex()',
+                        '[style.--ngp-toasts-before]': 'index()',
+                        '[style.--ngp-toast-index]': 'index() + 1',
+                        '[style.--ngp-toast-width.px]': 'config.width',
+                        '[style.--ngp-toast-height.px]': 'dimensions().height',
+                        '[style.--ngp-toast-offset.px]': 'offset()',
+                        '[style.--ngp-toast-front-height.px]': 'frontToastHeight()',
+                        '[style.--ngp-toast-swipe-amount-x.px]': 'swipeAmount().x',
+                        '[style.--ngp-toast-swipe-amount-y.px]': 'swipeAmount().y',
+                        '[style.--ngp-toast-swipe-x]': 'swipeAmount().x',
+                        '[style.--ngp-toast-swipe-y]': 'swipeAmount().y',
+                    },
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onPointerMove: [{
+                type: HostListener,
+                args: ['pointermove', ['$event']]
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['pointerup']
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpToast, NgpToastRef, provideToastConfig };
+export { NgpToast, NgpToastManager, injectToastContext, provideToastConfig };
 //# sourceMappingURL=ng-primitives-toast.mjs.map