import { Component, computed, input, signal } from '@angular/core';
import { NgStyle } from '@angular/common';
import { DEFAULT_QUALITY, buildOptimizedUrl, generateBlurSvg, generateSrcSet } from '@absolutejs/absolute/image';
import * as i0 from "@angular/core";
/** Resolve the blur background CSS value from placeholder config */
const resolveBlurBg = (placeholderValue, blurDataUrl) => {
    if (typeof placeholderValue === 'string' &&
        placeholderValue !== 'blur' &&
        placeholderValue.startsWith('data:')) {
        return generateBlurSvg(placeholderValue);
    }
    if (blurDataUrl)
        return generateBlurSvg(blurDataUrl);
    return undefined;
};
export class ImageComponent {
    constructor() {
        // ── Inputs ──────────────────────────────────────────────────
        this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
        this.blurDataURL = input(...(ngDevMode ? [undefined, { debugName: "blurDataURL" }] : /* istanbul ignore next */ []));
        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
        this.crossOrigin = input(...(ngDevMode ? [undefined, { debugName: "crossOrigin" }] : /* istanbul ignore next */ []));
        this.fetchPriority = input(...(ngDevMode ? [undefined, { debugName: "fetchPriority" }] : /* istanbul ignore next */ []));
        this.fill = input(false, ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
        this.height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
        this.loader = input(...(ngDevMode ? [undefined, { debugName: "loader" }] : /* istanbul ignore next */ []));
        this.loading = input('lazy', ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
        this.onError = input(...(ngDevMode ? [undefined, { debugName: "onError" }] : /* istanbul ignore next */ []));
        this.onLoad = input(...(ngDevMode ? [undefined, { debugName: "onLoad" }] : /* istanbul ignore next */ []));
        this.overrideSrc = input(...(ngDevMode ? [undefined, { debugName: "overrideSrc" }] : /* istanbul ignore next */ []));
        this.placeholder = input('empty', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
        this.priority = input(false, ...(ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []));
        this.quality = input(DEFAULT_QUALITY, ...(ngDevMode ? [{ debugName: "quality" }] : /* istanbul ignore next */ []));
        this.referrerPolicy = input(...(ngDevMode ? [undefined, { debugName: "referrerPolicy" }] : /* istanbul ignore next */ []));
        this.sizes = input(...(ngDevMode ? [undefined, { debugName: "sizes" }] : /* istanbul ignore next */ []));
        this.src = input.required(...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
        this.style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
        this.unoptimized = input(false, ...(ngDevMode ? [{ debugName: "unoptimized" }] : /* istanbul ignore next */ []));
        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
        // ── Internal state ──────────────────────────────────────────
        this.blurRemoved = signal(false, ...(ngDevMode ? [{ debugName: "blurRemoved" }] : /* istanbul ignore next */ []));
        // ── Computed ────────────────────────────────────────────────
        this.resolvedSrc = computed(() => {
            const override = this.overrideSrc();
            if (override)
                return override;
            if (this.unoptimized())
                return this.src();
            const loaderFn = this.loader();
            if (loaderFn)
                return loaderFn({
                    quality: this.quality(),
                    src: this.src(),
                    width: this.width() ?? 0
                });
            const currentWidth = this.width();
            if (!currentWidth)
                return buildOptimizedUrl(this.src(), 0, this.quality());
            return buildOptimizedUrl(this.src(), currentWidth, this.quality());
        }, ...(ngDevMode ? [{ debugName: "resolvedSrc" }] : /* istanbul ignore next */ []));
        this.srcSet = computed(() => this.unoptimized()
            ? null
            : (generateSrcSet(this.src(), this.width(), this.sizes(), undefined, this.loader() ?? undefined) ?? null), ...(ngDevMode ? [{ debugName: "srcSet" }] : /* istanbul ignore next */ []));
        this.resolvedSrcSet = computed(() => this.srcSet() ?? null, ...(ngDevMode ? [{ debugName: "resolvedSrcSet" }] : /* istanbul ignore next */ []));
        this.resolvedSizes = computed(() => this.sizes() ?? (this.fill() ? '100vw' : null), ...(ngDevMode ? [{ debugName: "resolvedSizes" }] : /* istanbul ignore next */ []));
        this.resolvedCrossOrigin = computed(() => this.crossOrigin() ?? null, ...(ngDevMode ? [{ debugName: "resolvedCrossOrigin" }] : /* istanbul ignore next */ []));
        this.resolvedReferrerPolicy = computed(() => this.referrerPolicy() ?? null, ...(ngDevMode ? [{ debugName: "resolvedReferrerPolicy" }] : /* istanbul ignore next */ []));
        this.resolvedLoading = computed(() => this.priority() ? 'eager' : this.loading(), ...(ngDevMode ? [{ debugName: "resolvedLoading" }] : /* istanbul ignore next */ []));
        this.resolvedFetchPriority = computed(() => this.priority() ? 'high' : (this.fetchPriority() ?? null), ...(ngDevMode ? [{ debugName: "resolvedFetchPriority" }] : /* istanbul ignore next */ []));
        this.imgStyle = computed(() => {
            const base = {
                ...(this.style() ?? {}),
                color: 'transparent'
            };
            const hasBlur = !this.blurRemoved() &&
                (this.placeholder() === 'blur' ||
                    (typeof this.placeholder() === 'string' &&
                        this.placeholder() !== 'empty' &&
                        (this.placeholder() ?? '').startsWith('data:')));
            const blurValue = hasBlur
                ? resolveBlurBg(this.placeholder(), this.blurDataURL())
                : undefined;
            if (blurValue) {
                base['background-image'] = blurValue;
                base['background-position'] = 'center';
                base['background-repeat'] = 'no-repeat';
                base['background-size'] = 'cover';
            }
            if (this.fill()) {
                base.height = '100%';
                base.inset = '0';
                base['object-fit'] = 'cover';
                base.position = 'absolute';
                base.width = '100%';
            }
            return base;
        }, ...(ngDevMode ? [{ debugName: "imgStyle" }] : /* istanbul ignore next */ []));
    }
    // ── Event handlers ──────────────────────────────────────────
    handleLoad(event) {
        this.blurRemoved.set(true);
        const callback = this.onLoad();
        if (callback)
            callback(event);
    }
    handleError(event) {
        const callback = this.onError();
        if (callback)
            callback(event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ImageComponent, isStandalone: true, selector: "abs-image", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, blurDataURL: { classPropertyName: "blurDataURL", publicName: "blurDataURL", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, crossOrigin: { classPropertyName: "crossOrigin", publicName: "crossOrigin", isSignal: true, isRequired: false, transformFunction: null }, fetchPriority: { classPropertyName: "fetchPriority", publicName: "fetchPriority", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, onError: { classPropertyName: "onError", publicName: "onError", isSignal: true, isRequired: false, transformFunction: null }, onLoad: { classPropertyName: "onLoad", publicName: "onLoad", isSignal: true, isRequired: false, transformFunction: null }, overrideSrc: { classPropertyName: "overrideSrc", publicName: "overrideSrc", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, unoptimized: { classPropertyName: "unoptimized", publicName: "unoptimized", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
		@if (fill()) {
			<span
				style="position:relative;overflow:hidden;display:block;width:100%;height:100%"
			>
				<img
					[alt]="alt()"
					[src]="resolvedSrc()"
					[attr.srcset]="resolvedSrcSet()"
					[attr.sizes]="resolvedSizes()"
					[loading]="resolvedLoading()"
					[class]="className()"
					[ngStyle]="imgStyle()"
					[attr.crossorigin]="resolvedCrossOrigin()"
					[attr.referrerpolicy]="resolvedReferrerPolicy()"
					[attr.fetchpriority]="resolvedFetchPriority()"
					decoding="async"
					(load)="handleLoad($event)"
					(error)="handleError($event)"
				/>
			</span>
		} @else {
			<img
				[alt]="alt()"
				[src]="resolvedSrc()"
				[attr.srcset]="resolvedSrcSet()"
				[attr.sizes]="resolvedSizes()"
				[width]="width()"
				[height]="height()"
				[loading]="resolvedLoading()"
				[class]="className()"
				[ngStyle]="imgStyle()"
				[attr.crossorigin]="resolvedCrossOrigin()"
				[attr.referrerpolicy]="resolvedReferrerPolicy()"
				[attr.fetchpriority]="resolvedFetchPriority()"
				decoding="async"
				(load)="handleLoad($event)"
				(error)="handleError($event)"
			/>
		}
	`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ImageComponent, decorators: [{
            type: Component,
            args: [{
                    imports: [NgStyle],
                    selector: 'abs-image',
                    standalone: true,
                    template: `
		@if (fill()) {
			<span
				style="position:relative;overflow:hidden;display:block;width:100%;height:100%"
			>
				<img
					[alt]="alt()"
					[src]="resolvedSrc()"
					[attr.srcset]="resolvedSrcSet()"
					[attr.sizes]="resolvedSizes()"
					[loading]="resolvedLoading()"
					[class]="className()"
					[ngStyle]="imgStyle()"
					[attr.crossorigin]="resolvedCrossOrigin()"
					[attr.referrerpolicy]="resolvedReferrerPolicy()"
					[attr.fetchpriority]="resolvedFetchPriority()"
					decoding="async"
					(load)="handleLoad($event)"
					(error)="handleError($event)"
				/>
			</span>
		} @else {
			<img
				[alt]="alt()"
				[src]="resolvedSrc()"
				[attr.srcset]="resolvedSrcSet()"
				[attr.sizes]="resolvedSizes()"
				[width]="width()"
				[height]="height()"
				[loading]="resolvedLoading()"
				[class]="className()"
				[ngStyle]="imgStyle()"
				[attr.crossorigin]="resolvedCrossOrigin()"
				[attr.referrerpolicy]="resolvedReferrerPolicy()"
				[attr.fetchpriority]="resolvedFetchPriority()"
				decoding="async"
				(load)="handleLoad($event)"
				(error)="handleError($event)"
			/>
		}
	`
                }]
        }], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], blurDataURL: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurDataURL", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], crossOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossOrigin", required: false }] }], fetchPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchPriority", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loader: [{ type: i0.Input, args: [{ isSignal: true, alias: "loader", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onError: [{ type: i0.Input, args: [{ isSignal: true, alias: "onError", required: false }] }], onLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLoad", required: false }] }], overrideSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrideSrc", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], quality: [{ type: i0.Input, args: [{ isSignal: true, alias: "quality", required: false }] }], referrerPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerPolicy", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], unoptimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "unoptimized", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
