@omnedia/ngx-fade/fesm2022/omnedia-ngx-fade.mjs

A simple component library to add a (directional) fade effect to your elements.

import * as i0 from '@angular/core';
import { PLATFORM_ID, Input, ViewChild, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';

class NgxFadeComponent {
    platformId;
    cdr;
    omFadeElement;
    direction;
    animateOnlyOnce = false;
    set transitionDuration(duration) {
        this.style["--om-fade-transition-duration"] = duration;
    }
    set transitionFunction(easeFunction) {
        this.style["--om-fade-transition-function"] = easeFunction;
    }
    set customTransform(customTransform) {
        this.style["transform"] = `${customTransform}`;
    }
    style = {};
    inViewport = false;
    intersectionObserver;
    constructor(platformId, cdr) {
        this.platformId = platformId;
        this.cdr = cdr;
    }
    ngAfterViewInit() {
        this.initObserver();
    }
    ngOnDestroy() {
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
        }
    }
    initObserver() {
        if (!isPlatformBrowser(this.platformId)) {
            return;
        }
        this.intersectionObserver = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting !== this.inViewport) {
                if (this.animateOnlyOnce && this.inViewport && !entry.isIntersecting) {
                    this.inViewport = true;
                }
                else {
                    this.inViewport = entry.isIntersecting;
                    this.cdr.detectChanges();
                }
            }
        });
        this.intersectionObserver.observe(this.omFadeElement.nativeElement);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxFadeComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: NgxFadeComponent, isStandalone: true, selector: "om-fade", inputs: { direction: "direction", animateOnlyOnce: "animateOnlyOnce", transitionDuration: "transitionDuration", transitionFunction: "transitionFunction", customTransform: "customTransform" }, viewQueries: [{ propertyName: "omFadeElement", first: true, predicate: ["OmFadeElement"], descendants: true }], ngImport: i0, template: "<div class=\"om-fade\" #OmFadeElement>\r\n  <div class=\"om-fade-content\" [ngStyle]=\"style\" [ngClass]=\"direction\" [class.show]=\"inViewport\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".om-fade .om-fade-content{--om-fade-transition-duration: .5s;--om-fade-transition-function: ease-in-out;opacity:0;transition:all var(--om-fade-transition-duration) var(--om-fade-transition-function)}.om-fade .om-fade-content.up{transform:translateY(100%)}.om-fade .om-fade-content.down{transform:translateY(-100%)}.om-fade .om-fade-content.left{transform:translate(-100%)}.om-fade .om-fade-content.right{transform:translate(100%)}.om-fade .om-fade-content.show{opacity:1;transform:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxFadeComponent, decorators: [{
            type: Component,
            args: [{ selector: "om-fade", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"om-fade\" #OmFadeElement>\r\n  <div class=\"om-fade-content\" [ngStyle]=\"style\" [ngClass]=\"direction\" [class.show]=\"inViewport\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".om-fade .om-fade-content{--om-fade-transition-duration: .5s;--om-fade-transition-function: ease-in-out;opacity:0;transition:all var(--om-fade-transition-duration) var(--om-fade-transition-function)}.om-fade .om-fade-content.up{transform:translateY(100%)}.om-fade .om-fade-content.down{transform:translateY(-100%)}.om-fade .om-fade-content.left{transform:translate(-100%)}.om-fade .om-fade-content.right{transform:translate(100%)}.om-fade .om-fade-content.show{opacity:1;transform:unset!important}\n"] }]
        }], ctorParameters: () => [{ type: Object, decorators: [{
                    type: Inject,
                    args: [PLATFORM_ID]
                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { omFadeElement: [{
                type: ViewChild,
                args: ["OmFadeElement"]
            }], direction: [{
                type: Input,
                args: ["direction"]
            }], animateOnlyOnce: [{
                type: Input,
                args: ["animateOnlyOnce"]
            }], transitionDuration: [{
                type: Input,
                args: ["transitionDuration"]
            }], transitionFunction: [{
                type: Input,
                args: ["transitionFunction"]
            }], customTransform: [{
                type: Input,
                args: ["customTransform"]
            }] } });

/*
 * Public API Surface of ngx-fade
 */

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

export { NgxFadeComponent };
//# sourceMappingURL=omnedia-ngx-fade.mjs.map