{"version":3,"file":"verben-ng-ui-src-lib-components-image.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/image/image.component.ts","../../../projects/verben-ng-ui/src/lib/components/image/image.component.html","../../../projects/verben-ng-ui/src/lib/components/image/image.module.ts","../../../projects/verben-ng-ui/src/lib/components/image/verben-ng-ui-src-lib-components-image.ts"],"sourcesContent":["import { Component, Input, OnInit, ElementRef, AfterViewInit } from '@angular/core';\n\n@Component({\n  selector: 'verben-image',\n  templateUrl: './image.component.html',\n  styleUrl: './image.component.css',\n})\n\nexport class ImageComponent implements OnInit, AfterViewInit {\n  @Input() url: string = '';\n  @Input() placeholder: string = 'assets/placeholder.png';\n  @Input() lazyLoad: boolean = false;\n  @Input() width: string = '100%'; \n  @Input() height: string = 'auto'; \n\n  isLoaded: boolean = false;\n\n  constructor(private el: ElementRef) {}\n\n  ngOnInit(): void {}\n\n  ngAfterViewInit(): void {\n    if (this.lazyLoad) {\n      const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            const img: HTMLImageElement = this.el.nativeElement.querySelector('img[data-src]');\n            img.src = img.getAttribute('data-src')!;\n            this.isLoaded = true;\n            observer.unobserve(entry.target);\n          }\n        });\n      });\n      observer.observe(this.el.nativeElement);\n    }else {    \n      const img: HTMLImageElement = this.el.nativeElement.querySelector('img');\n      img.onload = () => {\n        this.isLoaded = true; \n      };\n    }\n  }\n}\n\n\n\n","<div>\n    <img [src]=\"url\"\n         [attr.data-src]=\"lazyLoad ? url : null\"\n         (load)=\"isLoaded = true\"\n         (error)=\"isLoaded = true; url = placeholder\"\n         [ngClass]=\"{'loaded': isLoaded}\"\n         [style.width]=\"width\"\n         [style.height]=\"height\"\n         alt=\"Image\"/>\n    <ng-container *ngIf=\"!isLoaded\">\n        <img\n        [src]=\"placeholder\"\n        [style.width]=\"width\"\n        [style.height]=\"height\"\n        alt=\"Placeholder Image\"\n      />\n    </ng-container>\n  </div>\n","import { NgModule } from '@angular/core';\nimport { ImageComponent } from './image.component';\nimport { CommonModule } from '@angular/common';\nimport { VerbenaInputModule } from 'verben-ng-ui/src/lib/verbena-input';\n\n@NgModule({\n  declarations: [ImageComponent],\n  imports: [CommonModule, VerbenaInputModule, CommonModule],\n  exports: [ImageComponent],\n})\nexport class ImageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}