@omnedia/ngx-border-beam/fesm2022/omnedia-ngx-border-beam.mjs

A simple component library to create a container with an animated border.

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

class NgxBorderBeamComponent {
    platformId;
    borderBeamRef;
    set colorFrom(color) {
        this.style["--color-from"] = color;
    }
    set colorTo(color) {
        this.style["--color-to"] = color;
    }
    set borderRadius(radius) {
        this.style["--border-radius"] = radius;
    }
    set borderColor(color) {
        this.style["--border-color"] = color;
    }
    set animationDuration(duration) {
        this.style["--animation-duration"] = duration;
    }
    set cubeSize(cubeSize) {
        this.style["--border-cube-size"] = cubeSize;
    }
    styleClass;
    style = {};
    isInView = signal(false);
    intersectionObserver;
    constructor(platformId) {
        this.platformId = platformId;
    }
    ngAfterViewInit() {
        if (isPlatformBrowser(this.platformId)) {
            this.intersectionObserver = new IntersectionObserver(([entry]) => {
                this.isInView.set(entry.isIntersecting);
            });
            this.intersectionObserver.observe(this.borderBeamRef.nativeElement);
        }
    }
    ngOnDestroy() {
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxBorderBeamComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: NgxBorderBeamComponent, isStandalone: true, selector: "om-border-beam", inputs: { colorFrom: ["gradientColorStart", "colorFrom"], colorTo: ["gradientColorEnd", "colorTo"], borderRadius: "borderRadius", borderColor: "borderColor", animationDuration: "animationDuration", cubeSize: "cubeSize", styleClass: "styleClass" }, viewQueries: [{ propertyName: "borderBeamRef", first: true, predicate: ["OmBorderBeamWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"om-border-beam-wrapper\" #OmBorderBeamWrapper>\r\n  <div class=\"om-border-beam\" [ngStyle]=\"style\" [ngClass]=\"styleClass\">\r\n    <div class=\"om-border-beam-border\" [class.paused]=\"!isInView()\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".om-border-beam-wrapper{overflow:hidden;padding:1px}.om-border-beam{--color-from: #ffaa40;--color-to: #9c40ff;--border-radius: .5rem;--border-color: hsla(0, 0%, 100%, 0);--animation-duration: 12s;--border-cube-size: 250px;border:1px solid;border-radius:var(--border-radius);border-color:var(--border-color);position:relative}.om-border-beam .om-border-beam-border{position:absolute;width:100%;height:100%;border:1px solid transparent;inset:0;border-radius:inherit;-webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);-webkit-mask-composite:source-in,xor;mask-composite:intersect;mask-clip:padding-box,border-box;pointer-events:none}.om-border-beam .om-border-beam-border:after{content:\"\";width:var(--border-cube-size);aspect-ratio:1/1;display:block;box-sizing:border-box;border:0 solid;offset-path:rect(0 auto auto 0 round 200px);offset-anchor:90% 50%;background:linear-gradient(to left,var(--color-from),var(--color-to),transparent);animation:border-beam var(--animation-duration) infinite linear}.om-border-beam .om-border-beam-border.paused:after{animation-play-state:paused}@keyframes border-beam{to{content:\"\";offset-distance:100%}}\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: NgxBorderBeamComponent, decorators: [{
            type: Component,
            args: [{ selector: "om-border-beam", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"om-border-beam-wrapper\" #OmBorderBeamWrapper>\r\n  <div class=\"om-border-beam\" [ngStyle]=\"style\" [ngClass]=\"styleClass\">\r\n    <div class=\"om-border-beam-border\" [class.paused]=\"!isInView()\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".om-border-beam-wrapper{overflow:hidden;padding:1px}.om-border-beam{--color-from: #ffaa40;--color-to: #9c40ff;--border-radius: .5rem;--border-color: hsla(0, 0%, 100%, 0);--animation-duration: 12s;--border-cube-size: 250px;border:1px solid;border-radius:var(--border-radius);border-color:var(--border-color);position:relative}.om-border-beam .om-border-beam-border{position:absolute;width:100%;height:100%;border:1px solid transparent;inset:0;border-radius:inherit;-webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);-webkit-mask-composite:source-in,xor;mask-composite:intersect;mask-clip:padding-box,border-box;pointer-events:none}.om-border-beam .om-border-beam-border:after{content:\"\";width:var(--border-cube-size);aspect-ratio:1/1;display:block;box-sizing:border-box;border:0 solid;offset-path:rect(0 auto auto 0 round 200px);offset-anchor:90% 50%;background:linear-gradient(to left,var(--color-from),var(--color-to),transparent);animation:border-beam var(--animation-duration) infinite linear}.om-border-beam .om-border-beam-border.paused:after{animation-play-state:paused}@keyframes border-beam{to{content:\"\";offset-distance:100%}}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [PLATFORM_ID]
                }] }], propDecorators: { borderBeamRef: [{
                type: ViewChild,
                args: ["OmBorderBeamWrapper"]
            }], colorFrom: [{
                type: Input,
                args: ["gradientColorStart"]
            }], colorTo: [{
                type: Input,
                args: ["gradientColorEnd"]
            }], borderRadius: [{
                type: Input,
                args: ["borderRadius"]
            }], borderColor: [{
                type: Input,
                args: ["borderColor"]
            }], animationDuration: [{
                type: Input,
                args: ["animationDuration"]
            }], cubeSize: [{
                type: Input,
                args: ["cubeSize"]
            }], styleClass: [{
                type: Input,
                args: ["styleClass"]
            }] } });

/*
 * Public API Surface of ngx-border-beam
 */

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

export { NgxBorderBeamComponent };
//# sourceMappingURL=omnedia-ngx-border-beam.mjs.map