import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@aztrix/environment';
import { BehaviorSubject } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { IconsModule } from '@aztrix/icons';

class ImageSourceComponent {
    set border(value) {
        this.borderClass = typeof value === 'boolean' ? value : true;
    }
    constructor(_transformer) {
        this._transformer = _transformer;
        this.actualSize = false;
        this.alt = 'avatar';
        this.round = false;
        this.rounded = false;
        this._source = '';
        this._fallbackSource = '';
        this.error$ = new BehaviorSubject(false);
    }
    ngOnChanges(changes) {
        if (changes.source) {
            if (!this.source) {
                this._source = '';
                this.error$.next(true);
            }
            else {
                if (typeof this.source === 'string') {
                    this._source = this.source.includes('data:image/')
                        ? this.source
                        : this._transformer.transformUrl(this.source);
                }
                else {
                    this._source = this._transformer.transformUrl(this.source);
                }
                this.error$.next(false);
            }
        }
        if (changes.fallbackSource && this.fallbackSource) {
            this._fallbackSource = this._transformer.transformUrl(this.fallbackSource);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageSourceComponent, deps: [{ token: i1.UrlTransformerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageSourceComponent, selector: "ax-image-source", inputs: { source: "source", fallbackSource: "fallbackSource", actualSize: "actualSize", alt: "alt", round: "round", rounded: "rounded", border: "border" }, host: { properties: { "class.border": "this.borderClass" } }, usesOnChanges: true, ngImport: i0, template: "<img\n  loading=\"lazy\"\n  *ngIf=\"fallbackSource && ((error$ | async) || !_source)\"\n  class=\"image\"\n  [style.border-radius]=\"round || rounded ? (round ? '50%' : '10px') : undefined\"\n  [src]=\"_fallbackSource\"\n  [attr.alt]=\"alt\"\n/>\n<ng-container *ngIf=\"(error$ | async) || !_source\">\n  <ng-content></ng-content>\n</ng-container>\n<img\n  *ngIf=\"_source\"\n  loading=\"lazy\"\n  class=\"image origin\"\n  [style.border-radius]=\"round || rounded ? (round ? '50%' : '10px') : undefined\"\n  [ngClass]=\"{'actual-size': actualSize}\"\n  [class.visible]=\"_source && (error$ | async) === false\"\n  [src]=\"_source\"\n  [attr.alt]=\"alt\"\n  (error)=\"error$.next(true)\"\n/>\n", styles: [":host{display:flex;justify-content:center;align-items:center;text-align:center;position:relative;height:100%;width:100%}:host.round .image{border-radius:50%}:host.rounded .image{border-radius:10px}:host.border .image{color:#bdc3c9;border:1px solid currentColor}.image{height:100%;width:100%;object-fit:cover}.image.visible{display:initial}.icon{color:#fff;width:50%;height:50%}.ax-button .icon{margin:0}.origin{display:none;background-color:#fff;font-size:.625rem}.origin.actual-size{max-width:100%;max-height:100vh;width:auto;height:auto}@media only screen and (min-width: 600px){.origin.actual-size{max-height:600px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageSourceComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-image-source', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n  loading=\"lazy\"\n  *ngIf=\"fallbackSource && ((error$ | async) || !_source)\"\n  class=\"image\"\n  [style.border-radius]=\"round || rounded ? (round ? '50%' : '10px') : undefined\"\n  [src]=\"_fallbackSource\"\n  [attr.alt]=\"alt\"\n/>\n<ng-container *ngIf=\"(error$ | async) || !_source\">\n  <ng-content></ng-content>\n</ng-container>\n<img\n  *ngIf=\"_source\"\n  loading=\"lazy\"\n  class=\"image origin\"\n  [style.border-radius]=\"round || rounded ? (round ? '50%' : '10px') : undefined\"\n  [ngClass]=\"{'actual-size': actualSize}\"\n  [class.visible]=\"_source && (error$ | async) === false\"\n  [src]=\"_source\"\n  [attr.alt]=\"alt\"\n  (error)=\"error$.next(true)\"\n/>\n", styles: [":host{display:flex;justify-content:center;align-items:center;text-align:center;position:relative;height:100%;width:100%}:host.round .image{border-radius:50%}:host.rounded .image{border-radius:10px}:host.border .image{color:#bdc3c9;border:1px solid currentColor}.image{height:100%;width:100%;object-fit:cover}.image.visible{display:initial}.icon{color:#fff;width:50%;height:50%}.ax-button .icon{margin:0}.origin{display:none;background-color:#fff;font-size:.625rem}.origin.actual-size{max-width:100%;max-height:100vh;width:auto;height:auto}@media only screen and (min-width: 600px){.origin.actual-size{max-height:600px}}\n"] }]
        }], ctorParameters: () => [{ type: i1.UrlTransformerService }], propDecorators: { source: [{
                type: Input
            }], fallbackSource: [{
                type: Input
            }], actualSize: [{
                type: Input
            }], alt: [{
                type: Input
            }], round: [{
                type: Input
            }], rounded: [{
                type: Input
            }], borderClass: [{
                type: HostBinding,
                args: ['class.border']
            }], border: [{
                type: Input
            }] } });

class ImageSourceModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ImageSourceModule, declarations: [ImageSourceComponent], imports: [CommonModule, IconsModule], exports: [ImageSourceComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageSourceModule, imports: [CommonModule, IconsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageSourceModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [ImageSourceComponent],
                    imports: [CommonModule, IconsModule],
                    exports: [ImageSourceComponent],
                }]
        }] });

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

export { ImageSourceComponent, ImageSourceModule };
//# sourceMappingURL=aztrix-components-image-source.mjs.map
