{"version":3,"file":"ngx-blurhash-render.mjs","sources":["../../../projects/ngx-blurhash-render/src/lib/ngx-blurhash.component.ts","../../../projects/ngx-blurhash-render/src/public-api.ts","../../../projects/ngx-blurhash-render/src/ngx-blurhash-render.ts"],"sourcesContent":["import { CommonModule, isPlatformBrowser, NgOptimizedImage } from '@angular/common';\r\nimport { Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild } from '@angular/core';\r\nimport { decode } from 'blurhash';\r\n\r\n/**\r\n * Blurhash rendering component for Angular 15+\r\n */\r\n@Component({\r\n selector: 'ngx-blurhash-render',\r\n standalone: true,\r\n imports: [CommonModule, NgOptimizedImage],\r\n template: `\r\n \r\n \r\n `,\r\n styles: [\r\n `\r\n :host {\r\n display: block;\r\n position: relative;\r\n }\r\n\r\n canvas {\r\n height: 100%;\r\n width: 100%;\r\n position: absolute;\r\n left: 0;\r\n }\r\n\r\n img {\r\n opacity: 0;\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n object-fit: cover;\r\n left: 0;\r\n }\r\n\r\n .img-loaded {\r\n animation: popIn 0.4s both ease-in;\r\n }\r\n\r\n @keyframes popIn {\r\n 0% {\r\n opacity: 0;\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n }\r\n }\r\n `\r\n ]\r\n})\r\nexport class NgxBlurhashComponent {\r\n\r\n private blurHashValue!: string;\r\n\r\n /**\r\n * The blurHash string to render on the Canvas\r\n */\r\n @Input()\r\n get blurHash(): string {\r\n return this.blurHashValue;\r\n }\r\n set blurHash(value: string) {\r\n this.blurHashValue = value;\r\n this.decodeBlurHash();\r\n }\r\n\r\n\r\n /**\r\n * The image src string to render after fully loaded\r\n */\r\n private imageSrcValue!: string;\r\n @Input()\r\n get imageSrc(): string {\r\n return this.imageSrcValue;\r\n }\r\n set imageSrc(value: string) {\r\n this.imageSrcValue = value;\r\n }\r\n\r\n /**\r\n * The loading of the image based on its position in the DOM. By default loading is set to 'eager'\r\n */\r\n @Input() loading: string = 'eager';\r\n\r\n /**\r\n * Border Radius for the image in px. Default value is 0px\r\n */\r\n @Input() borderRadius: string = '0';\r\n\r\n /**\r\n * The width of the image and canvas in px. Default value is 200px\r\n */\r\n @Input() width: string = '200px';\r\n\r\n /**\r\n * The height of the image and canvas in px. Default value is 200px\r\n */\r\n @Input() height: string = '200px';\r\n\r\n public imageLoaded = false;\r\n public imageLoad = false;\r\n\r\n @ViewChild('canvas')\r\n private canvas!: ElementRef;\r\n\r\n public canvasWidth = 100;\r\n public canvasHeight = 100;\r\n\r\n\r\n\r\n public isBrowser: boolean;\r\n\r\n constructor(@Inject(PLATFORM_ID) platformId: Object) {\r\n this.isBrowser = isPlatformBrowser(platformId);\r\n }\r\n public ngAfterViewInit(): void {\r\n this.decodeBlurHash();\r\n }\r\n\r\n private decodeBlurHash() {\r\n if (this.canvas && this.blurHash) {\r\n const context = this.canvas.nativeElement.getContext('2d');\r\n const imageData = context?.createImageData(this.canvasWidth, this.canvasHeight);\r\n const pixels = decode(this.blurHash, this.canvasWidth, this.canvasHeight);\r\n imageData?.data.set(pixels);\r\n if(imageData)\r\n context?.putImageData(imageData, 0, 0);\r\n }\r\n }\r\n\r\n\r\n}\r\n","/*\r\n * Public API Surface of ngx-blurhash-render\r\n */\r\n\r\nexport * from './lib/ngx-blurhash.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}