import { safeCustomElement } from "../../shared/safe-custom-element.js";
import { TailwindElement } from "../../shared/tailwind-element/index.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import { html } from "lit";
import { property, state } from "lit/decorators.js";
import { tv } from "tailwind-variants";
import { styleMap } from "lit/directives/style-map.js";
//#region src/components/lukso-image/index.ts
var LuksoImage = class LuksoImage extends TailwindElement {
	constructor(..._args) {
		super(..._args);
		this.src = "";
		this.placeholder = "";
		this.isLoading = true;
		this.resolvedPlaceholder = "";
		this.hasError = false;
		this.imageStyles = tv({
			slots: {
				wrapper: "size-full bg-neutral-100",
				placeholder: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
				image: "object-cover opacity-0 size-full"
			},
			variants: {
				isLoading: { true: {} },
				hasError: { true: {} }
			},
			compoundVariants: [
				{
					isLoading: false,
					hasError: false,
					class: { image: "animate-fade-in" }
				},
				{
					isLoading: true,
					hasError: false,
					class: { placeholder: "animate-pulse" }
				},
				{
					isLoading: false,
					hasError: true,
					class: { image: "opacity-0" }
				}
			]
		});
	}
	handleLoad() {
		this.isLoading = false;
		this.hasError = false;
	}
	handleError() {
		this.isLoading = false;
		this.hasError = true;
	}
	async willUpdate(changedProperties) {
		if (changedProperties.has("hasError")) {
			if (this.hasError) this.resolvedPlaceholder = this.placeholder;
			else this.resolvedPlaceholder = "";
			await this.updateComplete;
		}
	}
	render() {
		const { wrapper, placeholder, image } = this.imageStyles({
			isLoading: this.isLoading,
			hasError: this.hasError
		});
		return html`
      <div class=${wrapper()}>
        <div
          class=${placeholder()}
          style=${styleMap({ backgroundImage: `url('${this.resolvedPlaceholder}')` })}
        >
          <img
            src=${this.src}
            class=${image()}
            loading="lazy"
            alt=""
            @load=${this.handleLoad}
            @error=${this.handleError}
          />
        </div>
      </div>
    `;
	}
};
__decorate([property({
	type: String,
	reflect: true
})], LuksoImage.prototype, "src", void 0);
__decorate([property({ type: String })], LuksoImage.prototype, "placeholder", void 0);
__decorate([state()], LuksoImage.prototype, "isLoading", void 0);
__decorate([state()], LuksoImage.prototype, "resolvedPlaceholder", void 0);
__decorate([state()], LuksoImage.prototype, "hasError", void 0);
LuksoImage = __decorate([safeCustomElement("lukso-image")], LuksoImage);
//#endregion
export { LuksoImage };
