UNPKG

@omnedia/ngx-floodlight

Version:

An Angular standalone component rendering dynamic animated floodlight gradients.

1 lines 5.98 kB
{"version":3,"file":"omnedia-ngx-floodlight.mjs","sources":["../../../projects/ngx-floodlight/src/lib/ngx-floodlight.component.ts","../../../projects/ngx-floodlight/src/lib/ngx-floodlight.component.html","../../../projects/ngx-floodlight/src/public-api.ts","../../../projects/ngx-floodlight/src/omnedia-ngx-floodlight.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n Inject,\r\n Input,\r\n OnDestroy,\r\n PLATFORM_ID,\r\n signal,\r\n ViewChild\r\n} from '@angular/core';\r\nimport {CommonModule, isPlatformBrowser} from '@angular/common';\r\n\r\n@Component({\r\n selector: 'om-floodlight',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './ngx-floodlight.component.html',\r\n styleUrl: './ngx-floodlight.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgxFloodlightComponent implements AfterViewInit, OnDestroy {\r\n @ViewChild('OmFloodlight') elementRef!: ElementRef<HTMLElement>;\r\n\r\n @Input() styleClass?: string;\r\n\r\n @Input() animate = true;\r\n\r\n @Input() animateOnlyOnce = false;\r\n\r\n @Input() set gradientFirst(v: string) {\r\n this.style.update(prev => ({...prev, '--floodlight-gradient-first': v}));\r\n }\r\n\r\n @Input() set gradientSecond(v: string) {\r\n this.style.update(prev => ({...prev, '--floodlight-gradient-second': v}));\r\n }\r\n\r\n @Input() set gradientThird(v: string) {\r\n this.style.update(prev => ({...prev, '--floodlight-gradient-third': v}));\r\n }\r\n\r\n @Input() set duration(v: string) {\r\n this.style.update(prev => ({...prev, '--animation-duration': v}));\r\n }\r\n\r\n style = signal({});\r\n\r\n private intersectionObserver?: IntersectionObserver;\r\n inViewport = signal(false);\r\n playedAnimationOnce = false;\r\n\r\n constructor(@Inject(PLATFORM_ID) private platformId: object) {\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (isPlatformBrowser(this.platformId)) {\r\n this.intersectionObserver = new IntersectionObserver(([entry]) => {\r\n this.inViewport.set(entry.isIntersecting);\r\n\r\n if (this.inViewport()) {\r\n this.playedAnimationOnce = true;\r\n }\r\n });\r\n this.intersectionObserver.observe(this.elementRef.nativeElement);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.intersectionObserver) this.intersectionObserver.disconnect();\r\n }\r\n}\r\n","<div class=\"om-floodlight\" [ngStyle]=\"style()\" #OmFloodlight>\r\n <ng-content></ng-content>\r\n <div class=\"om-floodlight-left\" [class.not-animated]=\"!animate\" [class.play-animation]=\"animate && inViewport() || animate && animateOnlyOnce && playedAnimationOnce\">\r\n <div class=\"floodlight-beam main\"></div>\r\n <div class=\"floodlight-beam small1\"></div>\r\n <div class=\"floodlight-beam small2\"></div>\r\n </div>\r\n <div class=\"om-floodlight-right\" [class.not-animated]=\"!animate\" [class.play-animation]=\"animate && inViewport() || animate && animateOnlyOnce && playedAnimationOnce\">\r\n <div class=\"floodlight-beam main\"></div>\r\n <div class=\"floodlight-beam small1\"></div>\r\n <div class=\"floodlight-beam small2\"></div>\r\n </div>\r\n</div>\r\n","/*\r\n * Public API Surface of ngx-floodlight\r\n */\r\n\r\nexport * from './lib/ngx-floodlight.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}