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

An Angular standalone component rendering dynamic animated floodlight gradients.

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

class NgxFloodlightComponent {
    platformId;
    elementRef;
    styleClass;
    animate = true;
    animateOnlyOnce = false;
    set gradientFirst(v) {
        this.style.update(prev => ({ ...prev, '--floodlight-gradient-first': v }));
    }
    set gradientSecond(v) {
        this.style.update(prev => ({ ...prev, '--floodlight-gradient-second': v }));
    }
    set gradientThird(v) {
        this.style.update(prev => ({ ...prev, '--floodlight-gradient-third': v }));
    }
    set duration(v) {
        this.style.update(prev => ({ ...prev, '--animation-duration': v }));
    }
    style = signal({});
    intersectionObserver;
    inViewport = signal(false);
    playedAnimationOnce = false;
    constructor(platformId) {
        this.platformId = platformId;
    }
    ngAfterViewInit() {
        if (isPlatformBrowser(this.platformId)) {
            this.intersectionObserver = new IntersectionObserver(([entry]) => {
                this.inViewport.set(entry.isIntersecting);
                if (this.inViewport()) {
                    this.playedAnimationOnce = true;
                }
            });
            this.intersectionObserver.observe(this.elementRef.nativeElement);
        }
    }
    ngOnDestroy() {
        if (this.intersectionObserver)
            this.intersectionObserver.disconnect();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgxFloodlightComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: NgxFloodlightComponent, isStandalone: true, selector: "om-floodlight", inputs: { styleClass: "styleClass", animate: "animate", animateOnlyOnce: "animateOnlyOnce", gradientFirst: "gradientFirst", gradientSecond: "gradientSecond", gradientThird: "gradientThird", duration: "duration" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["OmFloodlight"], descendants: true }], ngImport: i0, template: "<div class=\"om-floodlight\" [ngStyle]=\"style()\" #OmFloodlight>\n  <ng-content></ng-content>\n  <div class=\"om-floodlight-left\" [class.not-animated]=\"!animate\" [class.play-animation]=\"animate && inViewport() || animate && animateOnlyOnce && playedAnimationOnce\">\n    <div class=\"floodlight-beam main\"></div>\n    <div class=\"floodlight-beam small1\"></div>\n    <div class=\"floodlight-beam small2\"></div>\n  </div>\n  <div class=\"om-floodlight-right\" [class.not-animated]=\"!animate\" [class.play-animation]=\"animate && inViewport() || animate && animateOnlyOnce && playedAnimationOnce\">\n    <div class=\"floodlight-beam main\"></div>\n    <div class=\"floodlight-beam small1\"></div>\n    <div class=\"floodlight-beam small2\"></div>\n  </div>\n</div>\n", styles: [".om-floodlight{--floodlight-gradient-first: radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .15) 0, hsla(210, 100%, 55%, .05) 50%, hsla(210, 100%, 45%, 0) 80%);--floodlight-gradient-second: radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .1) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%);--floodlight-gradient-third: radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .1) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%);--floodlight-translate-y: -10%;--floodlight-width: clamp(50px, 50%, 350px);--floodlight-height: 150%;--floodlight-small-width: calc(var(--floodlight-width) / 2);--floodlight-left-x: 0;--floodlight-right-x: 0;--floodlight-rotation: 45deg;--animation-duration: 1s;position:relative;inset:0;width:100%;height:100%;z-index:10}.om-floodlight-left,.om-floodlight-right{position:absolute;top:0;height:100%;width:100%;pointer-events:none;z-index:40}.om-floodlight-left{left:0;transform:translate(-72%,-62%) scale(.5);opacity:0}.om-floodlight-left.not-animated{transform:translate(-5%,-5%);animation:unset;opacity:1}.om-floodlight-left.play-animation{animation:om-floodlight-left 2s ease .75s 1 forwards}.om-floodlight-right{right:0;transform:translate(72%,-62%) scale(.5);opacity:0}.om-floodlight-right.not-animated{transform:translate(-5%,-5%);animation:unset;opacity:1}.om-floodlight-right.play-animation{animation:om-floodlight-right 2s ease .75s 1 forwards}.floodlight-beam{position:absolute;top:0;left:0;height:var(--floodlight-height);pointer-events:none}.floodlight-beam.main{background:var(--floodlight-gradient-first);width:var(--floodlight-width);transform:translateY(var(--floodlight-translate-y)) rotate(calc(-1 * var(--floodlight-rotation))) translate(var(--floodlight-left-x, 0));left:0}.floodlight-beam.small1{background:var(--floodlight-gradient-second);width:var(--floodlight-small-width);transform:rotate(calc(-1 * var(--floodlight-rotation))) translate(145%,-40%) translate(var(--floodlight-left-x, 0));left:0}.floodlight-beam.small2{background:var(--floodlight-gradient-third);width:var(--floodlight-small-width);transform:rotate(calc(-1 * var(--floodlight-rotation))) translate(60%,-40%) translate(var(--floodlight-left-x, 0));left:0}.om-floodlight-right .floodlight-beam.main{left:auto;right:0;background:var(--floodlight-gradient-first);transform:translateY(var(--floodlight-translate-y)) rotate(var(--floodlight-rotation)) translate(var(--floodlight-right-x, 0))}.om-floodlight-right .floodlight-beam.small1{left:auto;right:0;background:var(--floodlight-gradient-second);transform:rotate(var(--floodlight-rotation)) translate(-100%,-40%) translate(var(--floodlight-right-x, 0))}.om-floodlight-right .floodlight-beam.small2{left:auto;right:0;background:var(--floodlight-gradient-third);transform:rotate(var(--floodlight-rotation)) translate(-25%,-20%) translate(var(--floodlight-right-x, 0))}@keyframes om-floodlight-left{0%{opacity:0;transform:translate(-72%,-62%) scale(.5)}to{opacity:1;transform:translate(5%,-5%) scale(1)}}@keyframes om-floodlight-right{0%{opacity:0;transform:translate(72%,-62%) scale(.5)}to{opacity:1;transform:translate(-5%,-5%) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgxFloodlightComponent, decorators: [{
            type: Component,
            args: [{ selector: 'om-floodlight', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"om-floodlight\" [ngStyle]=\"style()\" #OmFloodlight>\n  <ng-content></ng-content>\n  <div class=\"om-floodlight-left\" [class.not-animated]=\"!animate\" [class.play-animation]=\"animate && inViewport() || animate && animateOnlyOnce && playedAnimationOnce\">\n    <div class=\"floodlight-beam main\"></div>\n    <div class=\"floodlight-beam small1\"></div>\n    <div class=\"floodlight-beam small2\"></div>\n  </div>\n  <div class=\"om-floodlight-right\" [class.not-animated]=\"!animate\" [class.play-animation]=\"animate && inViewport() || animate && animateOnlyOnce && playedAnimationOnce\">\n    <div class=\"floodlight-beam main\"></div>\n    <div class=\"floodlight-beam small1\"></div>\n    <div class=\"floodlight-beam small2\"></div>\n  </div>\n</div>\n", styles: [".om-floodlight{--floodlight-gradient-first: radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .15) 0, hsla(210, 100%, 55%, .05) 50%, hsla(210, 100%, 45%, 0) 80%);--floodlight-gradient-second: radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .1) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%);--floodlight-gradient-third: radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .1) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%);--floodlight-translate-y: -10%;--floodlight-width: clamp(50px, 50%, 350px);--floodlight-height: 150%;--floodlight-small-width: calc(var(--floodlight-width) / 2);--floodlight-left-x: 0;--floodlight-right-x: 0;--floodlight-rotation: 45deg;--animation-duration: 1s;position:relative;inset:0;width:100%;height:100%;z-index:10}.om-floodlight-left,.om-floodlight-right{position:absolute;top:0;height:100%;width:100%;pointer-events:none;z-index:40}.om-floodlight-left{left:0;transform:translate(-72%,-62%) scale(.5);opacity:0}.om-floodlight-left.not-animated{transform:translate(-5%,-5%);animation:unset;opacity:1}.om-floodlight-left.play-animation{animation:om-floodlight-left 2s ease .75s 1 forwards}.om-floodlight-right{right:0;transform:translate(72%,-62%) scale(.5);opacity:0}.om-floodlight-right.not-animated{transform:translate(-5%,-5%);animation:unset;opacity:1}.om-floodlight-right.play-animation{animation:om-floodlight-right 2s ease .75s 1 forwards}.floodlight-beam{position:absolute;top:0;left:0;height:var(--floodlight-height);pointer-events:none}.floodlight-beam.main{background:var(--floodlight-gradient-first);width:var(--floodlight-width);transform:translateY(var(--floodlight-translate-y)) rotate(calc(-1 * var(--floodlight-rotation))) translate(var(--floodlight-left-x, 0));left:0}.floodlight-beam.small1{background:var(--floodlight-gradient-second);width:var(--floodlight-small-width);transform:rotate(calc(-1 * var(--floodlight-rotation))) translate(145%,-40%) translate(var(--floodlight-left-x, 0));left:0}.floodlight-beam.small2{background:var(--floodlight-gradient-third);width:var(--floodlight-small-width);transform:rotate(calc(-1 * var(--floodlight-rotation))) translate(60%,-40%) translate(var(--floodlight-left-x, 0));left:0}.om-floodlight-right .floodlight-beam.main{left:auto;right:0;background:var(--floodlight-gradient-first);transform:translateY(var(--floodlight-translate-y)) rotate(var(--floodlight-rotation)) translate(var(--floodlight-right-x, 0))}.om-floodlight-right .floodlight-beam.small1{left:auto;right:0;background:var(--floodlight-gradient-second);transform:rotate(var(--floodlight-rotation)) translate(-100%,-40%) translate(var(--floodlight-right-x, 0))}.om-floodlight-right .floodlight-beam.small2{left:auto;right:0;background:var(--floodlight-gradient-third);transform:rotate(var(--floodlight-rotation)) translate(-25%,-20%) translate(var(--floodlight-right-x, 0))}@keyframes om-floodlight-left{0%{opacity:0;transform:translate(-72%,-62%) scale(.5)}to{opacity:1;transform:translate(5%,-5%) scale(1)}}@keyframes om-floodlight-right{0%{opacity:0;transform:translate(72%,-62%) scale(.5)}to{opacity:1;transform:translate(-5%,-5%) scale(1)}}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [PLATFORM_ID]
                }] }], propDecorators: { elementRef: [{
                type: ViewChild,
                args: ['OmFloodlight']
            }], styleClass: [{
                type: Input
            }], animate: [{
                type: Input
            }], animateOnlyOnce: [{
                type: Input
            }], gradientFirst: [{
                type: Input
            }], gradientSecond: [{
                type: Input
            }], gradientThird: [{
                type: Input
            }], duration: [{
                type: Input
            }] } });

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

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

export { NgxFloodlightComponent };
//# sourceMappingURL=omnedia-ngx-floodlight.mjs.map