import { MXBaseComponent, AXComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { input, EventEmitter, HostBinding, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/**
 * Displays an image with customizable settings.
 *
 * @category Components
 */
class AXImageComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this.width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : []));
        this.height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : []));
        /**
         * Specifies when the image overlay should be shown.
         *
         * @defaultValue 'hover'
         */
        this.overlayMode = 'hover';
        /**
         * Priority for image loading.
         *
         * @defaultValue 'auto'
         */
        this.priority = 'auto';
        /**
         * Emits an event when the image has successfully loaded.
         *
         * @event
         */
        this.onLoad = new EventEmitter();
        /**
         * Emits an event when there is an error loading the image.
         *
         * @event
         */
        this.onError = new EventEmitter();
        /**
         *  @ignore
         */
        this._hasError = false;
        /**
         *  @ignore
         */
        this._isLoaded = false;
        /**
         *  @ignore
         */
        this._isLoading = false;
    }
    /**
     *  @ignore
     */
    ngOnInit() {
        super.ngOnInit();
        this._isLoading = this.src != null;
    }
    /**
     *  @ignore
     */
    _handleLoadImage(e) {
        this._isLoaded = true;
        this._hasError = false;
        this._isLoading = false;
        this.onLoad.emit({
            component: this,
            htmlElement: this.getHostElement(),
            isUserInteraction: false,
            nativeEvent: e,
        });
    }
    /**
     *  @ignore
     */
    _handleErrorImage(e) {
        this._hasError = true;
        this._isLoaded = false;
        this._isLoading = false;
        this.onError.emit({
            component: this,
            htmlElement: this.getHostElement(),
            isUserInteraction: false,
            nativeEvent: e,
        });
    }
    /**
     *  @ignore
     */
    get __hostClass() {
        return [
            `ax-overlay-${this.overlayMode}`,
            `${this._hasError || !this.src ? 'ax-state-empty' : ''}`,
            `${this._isLoading ? 'ax-state-loading' : ''}`,
        ];
    }
    get __hostStyle() {
        return `width: ${this.width()}px; height: ${this.height()}px`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageComponent, isStandalone: true, selector: "ax-image", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, overlayMode: { classPropertyName: "overlayMode", publicName: "overlayMode", isSignal: false, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: false, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: false, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onLoad: "onLoad", onError: "onError" }, host: { properties: { "class": "this.__hostClass", "style": "this.__hostStyle" } }, providers: [
            { provide: 'ax-image', useValue: AXImageComponent },
            { provide: AXComponent, useExisting: AXImageComponent },
        ], usesInheritance: true, ngImport: i0, template: "@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if (!src || _hasError) {\n  <ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if (_isLoading) {\n  <ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}\n", styles: ["ax-image{--ax-comp-image-overlay-color: rgb(0 0 0 / .75)}ax-image{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-image img{display:block;height:100%;width:100%}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay{display:flex}ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{position:absolute;top:0;display:flex;height:100%;width:100%;align-items:center;justify-content:center;background-color:var(--ax-comp-image-overlay-color)}ax-image ax-loading{display:flex;height:100%;width:100%;align-items:center;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-image', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        { provide: 'ax-image', useValue: AXImageComponent },
                        { provide: AXComponent, useExisting: AXImageComponent },
                    ], imports: [], template: "@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if (!src || _hasError) {\n  <ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if (_isLoading) {\n  <ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}\n", styles: ["ax-image{--ax-comp-image-overlay-color: rgb(0 0 0 / .75)}ax-image{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-image img{display:block;height:100%;width:100%}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay{display:flex}ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{position:absolute;top:0;display:flex;height:100%;width:100%;align-items:center;justify-content:center;background-color:var(--ax-comp-image-overlay-color)}ax-image ax-loading{display:flex;height:100%;width:100%;align-items:center;justify-content:center}\n"] }]
        }], propDecorators: { overlayMode: [{
                type: Input
            }], src: [{
                type: Input
            }], alt: [{
                type: Input
            }], priority: [{
                type: Input
            }], lazy: [{
                type: Input
            }], onLoad: [{
                type: Output
            }], onError: [{
                type: Output
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }], __hostStyle: [{
                type: HostBinding,
                args: ['style']
            }] } });

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

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

export { AXImageComponent, AXImageModule };
//# sourceMappingURL=acorex-components-image.mjs.map
