@omnedia/ngx-shine-border
Version:
A simple component library to create a container with an animated border.
92 lines (87 loc) • 7.36 kB
JavaScript
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 NgxShineBorderComponent {
platformId;
shineBorderRef;
styleClass;
set colorFrom(color) {
this.style["--color-from"] = color;
}
set colorMiddle(color) {
this.style["--color-middle"] = 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;
}
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.shineBorderRef.nativeElement);
}
}
ngOnDestroy() {
if (this.intersectionObserver) {
this.intersectionObserver.disconnect();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxShineBorderComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: NgxShineBorderComponent, isStandalone: true, selector: "om-shine-border", inputs: { styleClass: "styleClass", colorFrom: ["gradientColorStart", "colorFrom"], colorMiddle: ["gradientColorMiddle", "colorMiddle"], colorTo: ["gradientColorEnd", "colorTo"], borderRadius: "borderRadius", borderColor: "borderColor", animationDuration: "animationDuration" }, viewQueries: [{ propertyName: "shineBorderRef", first: true, predicate: ["OmShineBorderWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"om-shine-border-wrapper\" #OmShineBorderWrapper>\r\n <div class=\"om-shine-border\" [ngStyle]=\"style\" [ngClass]=\"styleClass\">\r\n <div class=\"om-shine-border-border\" [class.paused]=\"!isInView()\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".om-shine-border-wrapper{overflow:hidden;padding:1px;width:100%;height:100%}.om-shine-border{--color-from: #ffaa40;--color-middle: #fe8fb5;--color-to: #9c40ff;--border-radius: .5rem;--border-color: hsla(0, 0%, 0%, 0);--animation-duration: 14s;border:1px solid;border-radius:var(--border-radius);border-color:var(--border-color);position:relative;width:100%;height:100%}.om-shine-border .om-shine-border-border{border:1px solid transparent;border-radius:inherit;pointer-events:none}.om-shine-border .om-shine-border-border:before{content:\"\";position:absolute;height:100%;width:100%;aspect-ratio:1/1;will-change:background-position;border-radius:var(--border-radius);padding:1px;inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;background-size:300% 300%;background-image:radial-gradient(transparent,transparent,var(--color-from),var(--color-middle),var(--color-to),transparent,transparent);animation:shine-pulse var(--animation-duration) infinite linear}.om-shine-border .om-shine-border-border.paused:before{animation-play-state:paused}@keyframes shine-pulse{0%{background-position:0 0;content:\"\"}50%{background-position:100% 100%;content:\"\"}to{background-position:0 0;content:\"\"}}\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: NgxShineBorderComponent, decorators: [{
type: Component,
args: [{ selector: "om-shine-border", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"om-shine-border-wrapper\" #OmShineBorderWrapper>\r\n <div class=\"om-shine-border\" [ngStyle]=\"style\" [ngClass]=\"styleClass\">\r\n <div class=\"om-shine-border-border\" [class.paused]=\"!isInView()\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".om-shine-border-wrapper{overflow:hidden;padding:1px;width:100%;height:100%}.om-shine-border{--color-from: #ffaa40;--color-middle: #fe8fb5;--color-to: #9c40ff;--border-radius: .5rem;--border-color: hsla(0, 0%, 0%, 0);--animation-duration: 14s;border:1px solid;border-radius:var(--border-radius);border-color:var(--border-color);position:relative;width:100%;height:100%}.om-shine-border .om-shine-border-border{border:1px solid transparent;border-radius:inherit;pointer-events:none}.om-shine-border .om-shine-border-border:before{content:\"\";position:absolute;height:100%;width:100%;aspect-ratio:1/1;will-change:background-position;border-radius:var(--border-radius);padding:1px;inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;background-size:300% 300%;background-image:radial-gradient(transparent,transparent,var(--color-from),var(--color-middle),var(--color-to),transparent,transparent);animation:shine-pulse var(--animation-duration) infinite linear}.om-shine-border .om-shine-border-border.paused:before{animation-play-state:paused}@keyframes shine-pulse{0%{background-position:0 0;content:\"\"}50%{background-position:100% 100%;content:\"\"}to{background-position:0 0;content:\"\"}}\n"] }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }], propDecorators: { shineBorderRef: [{
type: ViewChild,
args: ["OmShineBorderWrapper"]
}], styleClass: [{
type: Input,
args: ["styleClass"]
}], colorFrom: [{
type: Input,
args: ["gradientColorStart"]
}], colorMiddle: [{
type: Input,
args: ["gradientColorMiddle"]
}], colorTo: [{
type: Input,
args: ["gradientColorEnd"]
}], borderRadius: [{
type: Input,
args: ["borderRadius"]
}], borderColor: [{
type: Input,
args: ["borderColor"]
}], animationDuration: [{
type: Input,
args: ["animationDuration"]
}] } });
/*
* Public API Surface of ngx-shine-border
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxShineBorderComponent };
//# sourceMappingURL=omnedia-ngx-shine-border.mjs.map