Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
let lit_directives_style_map_js = require("lit/directives/style-map.js");
//#region src/components/lukso-image/index.ts
var LuksoImage = class LuksoImage extends require_index.TailwindElement {
	constructor(..._args) {
		super(..._args);
		this.src = "";
		this.placeholder = "";
		this.isLoading = true;
		this.resolvedPlaceholder = "";
		this.hasError = false;
		this.imageStyles = (0, tailwind_variants.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 lit.html`
      <div class=${wrapper()}>
        <div
          class=${placeholder()}
          style=${(0, lit_directives_style_map_js.styleMap)({ backgroundImage: `url('${this.resolvedPlaceholder}')` })}
        >
          <img
            src=${this.src}
            class=${image()}
            loading="lazy"
            alt=""
            @load=${this.handleLoad}
            @error=${this.handleError}
          />
        </div>
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	reflect: true
})], LuksoImage.prototype, "src", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoImage.prototype, "placeholder", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoImage.prototype, "isLoading", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoImage.prototype, "resolvedPlaceholder", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoImage.prototype, "hasError", void 0);
LuksoImage = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-image")], LuksoImage);
//#endregion
Object.defineProperty(exports, "LuksoImage", {
	enumerable: true,
	get: function() {
		return LuksoImage;
	}
});
