@ssgoi/angular/fesm2022/ssgoi-angular.mjs

Angular bindings for SSGOI - Native app-like page transitions for Angular applications

import * as i0 from '@angular/core';
import { InjectionToken, inject, PLATFORM_ID, input, forwardRef, Directive, ElementRef } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { createSggoiTransitionContext, transition } from '@ssgoi/core';
export { transition } from '@ssgoi/core';

const SSGOI_CONTEXT = new InjectionToken("ssgoi-context");
function injectSsgoi() {
    const context = inject(SSGOI_CONTEXT, { optional: true });
    if (!context) {
        // During SSR or when not wrapped in <ssgoi>, return a no-op context
        // This prevents errors during server-side rendering
        return () => ({
            key: "",
            in: async () => ({}),
            out: async () => ({}),
        });
    }
    return context;
}

function createSsgoiContext(component) {
    const platformId = inject(PLATFORM_ID);
    // Only create context in browser environment
    if (!isPlatformBrowser(platformId)) {
        // Return a no-op context for SSR
        return undefined;
    }
    return createSggoiTransitionContext(component.config());
}
class Ssgoi {
    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Ssgoi, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: Ssgoi, isStandalone: true, selector: "[ssgoi]", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            {
                provide: SSGOI_CONTEXT,
                useFactory: createSsgoiContext,
                deps: [forwardRef(() => Ssgoi)],
            },
        ], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Ssgoi, decorators: [{
            type: Directive,
            args: [{
                    selector: "[ssgoi]",
                    standalone: true,
                    providers: [
                        {
                            provide: SSGOI_CONTEXT,
                            useFactory: createSsgoiContext,
                            deps: [forwardRef(() => Ssgoi)],
                        },
                    ],
                }]
        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });

class SsgoiTransition {
    // The directive attribute value becomes the transition ID
    ssgoiTransition = input.required(...(ngDevMode ? [{ debugName: "ssgoiTransition" }] : []));
    getTransition = injectSsgoi();
    el = inject((ElementRef));
    platformId = inject(PLATFORM_ID);
    cleanup;
    ngOnInit() {
        if (!isPlatformBrowser(this.platformId)) {
            return;
        }
        // Set data attribute on host element
        this.el.nativeElement.setAttribute("data-ssgoi-transition", this.ssgoiTransition());
    }
    ngAfterViewInit() {
        if (!isPlatformBrowser(this.platformId)) {
            return;
        }
        // Use the host element itself as the transition target
        const targetElement = this.el.nativeElement;
        const transitionConfig = this.getTransition(this.ssgoiTransition());
        const cleanupResult = transition(transitionConfig)(targetElement);
        if (cleanupResult) {
            this.cleanup = cleanupResult;
        }
    }
    ngOnDestroy() {
        this.cleanup?.();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SsgoiTransition, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: SsgoiTransition, isStandalone: true, selector: "[ssgoiTransition]", inputs: { ssgoiTransition: { classPropertyName: "ssgoiTransition", publicName: "ssgoiTransition", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SsgoiTransition, decorators: [{
            type: Directive,
            args: [{
                    selector: "[ssgoiTransition]",
                    standalone: true,
                }]
        }], propDecorators: { ssgoiTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "ssgoiTransition", required: true }] }] } });

class TransitionDirective {
    transition = input.required(...(ngDevMode ? [{ debugName: "transition" }] : []));
    el = inject((ElementRef));
    platformId = inject(PLATFORM_ID);
    cleanup;
    ngOnInit() {
        if (!isPlatformBrowser(this.platformId)) {
            return;
        }
        const config = this.transition();
        const cleanupResult = transition({
            key: config.key,
            in: config.in,
            out: config.out,
            ref: this.el.nativeElement,
        })(this.el.nativeElement);
        if (cleanupResult) {
            this.cleanup = cleanupResult;
        }
    }
    ngOnDestroy() {
        this.cleanup?.();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TransitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: TransitionDirective, isStandalone: true, selector: "[transition]", inputs: { transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TransitionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: "[transition]",
                }]
        }], propDecorators: { transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: true }] }] } });

/*
 * Public API Surface of @ssgoi/angular
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SSGOI_CONTEXT, Ssgoi, SsgoiTransition, TransitionDirective, injectSsgoi };
//# sourceMappingURL=ssgoi-angular.mjs.map